<template>
	<view class="template-shop tn-safe-area-inset-bottom">
		<!-- 顶部自定义导航 -->
		<tn-nav-bar fixed alpha customBack>
			<view slot="back" class='tn-custom-nav-bar__back' @click="goBack">
				<text class='icon tn-icon-left'></text>
				<text class='icon tn-icon-home-capsule-fill'></text>
			</view>
		</tn-nav-bar>

		<view class="box" @error="error" @touchstart="handleTouchStart" @touchmove="handleTouchMove"
			@touchend='touchend'>
			<view class="sky" id="move_view_tag" :style="{translate:`${translateX} ${translateY}`}">
				<view class="dz_content_top" :style="{height:window_height_rpx-320 + 'rpx'}">
					<view class="dz_content_top_content"
						:style="{height: mb_pic_pos[3] + 'rpx', width: mb_pic_pos[2] + 'rpx', top: mb_pic_pos[1] + 'rpx', left: mb_pic_pos[0] + 'rpx',transform: 'scale(' + newScale + ')'}">
						<image @tap="cancel_all_selected" :src="muban_info.img"
							:style="{height:100 + '%',width:100 + '%'}" v-if="muban_info != null">
						</image>
						<!-- <Myimg v-for="(item,index) in muban_info_pics" :key="index" :imgsrc="yonghu_pics[index]"
							:style="{position: 'absolute',left:item[1]*mb_pic_pos[4] + 'rpx',top:item[2]*mb_pic_pos[4] + 'rpx'}"
							@caibian='onCaibian' :stv="stv_yonghu_pics[index]"
							:isfocus="(btn_status[0]==0)&&(btn_status[1]==index)?'1':'0'" @focus='change_focus'
							@del="onClose" :width="item[3] * mb_pic_pos[4]" :height="item[4] * mb_pic_pos[4] " :s='bili'
							:ismoving="ismoving" @add="onClose"></Myimg> -->
						<!-- <image v-if="frontimg" class='front_pics' :src='frontimg'
							:style="{position: 'absolute',left:0,top:0,height:mb_pic_pos[3] + 'rpx',width:mb_pic_pos[2] + 'rpx'}">
						</image> -->
						<view v-for="(item,index) in element" :key="index">
							<ztimg ref="ztimg" :imgsrc="item.img" :pPos="mb_pic_pos" @focus="change_focus" :data-index="index"
								:dataid="index" :cStv="item.cStv" :newScale="newScale"
								:status="btn_status[0]==1 && btn_status[1]==index ? 1:0" :rpxTopx='rpx_to_px'
								@stvChanged='element_stvChanged' :imgStv="item.imgStv" @posInited="element_pos_inited"
								@addchexiao='add_element_chexiao' v-if="item.type==0 && item.hasdel==0"
								@updateimg="updateimg" @showedit='go_change_pic' :ismoving="ismoving" @down='go_down'
								:zindex="item.zindex+1" @up='go_up' @del='del_pic' :toumingdu="item.toumingdu"></ztimg>
							<zttxt :pPos="mb_pic_pos" :rpxTopx='rpx_to_px' v-else-if="item.type==1 && item.hasdel==0"
								:dataid="index" :txt="item.txt" :cStv="item.cStv" :status="btn_status[1]==index ?1:0"
								@focus='change_focus' :data-index="index" :data-id="{2:index}" :duiqi="item.duiqi"
								:color="item.color" :font="item.font" @addchexiao='add_element_chexiao'
								@stvChanged='element_stvChanged' @posInited="element_pos_inited" :newScale="newScale"
								@centerInited="txt_center_inite" :weight="item.weight" :direction="item.direction"
								@showedit='go_edit_txt' @del='del_element' :lineheight="item.lineheight"
								:letterspacing="item.letterspacing" :ismoving="ismoving" :container='item.container'
								@down='go_down' :zindex="item.zindex+1" @up='go_up' @update="update" :yushe="item.yushe"
								:hasninitefont="item.hasninitefont" :toumingdu="item.toumingdu"></zttxt>
						</view>
					</view>
				</view>
			</view>
		</view>

		<tn-popup v-model="popupshow" mode="center">
			<view class='edit_txt_view'>
				<view v-if="show_status == 2" class="edit_txt_view_textarea">
					<tn-input :clearable="false" v-model="element[btn_status[1]].txt" type="textarea" :border="true"
						:height="350" @input="txt_inputing" :autoHeight="true" />
					<view class="edit_txt_define">
						<view class="edit_txt_define_left" @click="jieguo_content_close">取消</view>
						<view class="edit_txt_define_right" @click="finish_edit_txt">确定</view>
					</view>
				</view>
			</view>
		</tn-popup>

		<view class="tabbar footerfixed dd-glass textfooterfixed" v-if="btn_status[0]==2">
			<view class="action" @click="go_edit_txt">
				<view class="bar-icon">
					<view class="tn-icon-edit-write tn-color-gray-txtup"></view>
				</view>
				<view class="tn-color-gray-txtup">编辑</view>
			</view>
			<view class="action" @click="go_select_duiqi">
				<view class="bar-icon">
					<view class="tn-icon-server tn-color-gray-txtup">
					</view>
				</view>
				<view class="tn-color-gray-txtup">样式</view>
			</view>
			<view class="action" @click="go_select_color">
				<view class="bar-icon">
					<view class="tn-icon-theme tn-color-gray-txtup">
					</view>
				</view>
				<view class="tn-color-gray-txtup">颜色</view>
			</view>
			<view class="action" @click="go_select_toumingdu">
				<view class="bar-icon">
					<view class="tn-icon-deploy tn-color-gray-txtup"></view>
				</view>
				<view class="tn-color-gray-txtup">透明的</view>
			</view>
			<view class="action" @click="go_change_ziti">
				<view class="bar-icon">
					<view class="tn-icon-font tn-color-gray-txtup">
					</view>
				</view>
				<view class="tn-color-gray-txtup">字体</view>
			</view>
			<view class="action" @click="copy_elememt">
				<view class="bar-icon">
					<view class="tn-icon-copy tn-color-gray-txtup">
					</view>
				</view>
				<view class="tn-color-gray-txtup">复制</view>
			</view>
		</view>

		<view class="tabbar footerfixed dd-glass textfooterfixed" v-if="btn_status[0]==1">
			<view class="action" @click="del_element">
				<view class="bar-icon">
					<view class="tn-icon-delete tn-color-gray-txtup"></view>
				</view>
				<view class="tn-color-gray-txtup">删除</view>
			</view>
			<view class="action" @click="go_add_pic(btn_status[1])">
				<view class="bar-icon">
					<view class="tn-icon-image tn-color-gray-txtup">
					</view>
				</view>
				<view class="tn-color-gray-txtup">换图</view>
			</view>
			<view class="action" @click="go_jiancai">
				<view class="bar-icon">
					<view class="tn-icon-tailor tn-color-gray-txtup">
					</view>
				</view>
				<view class="tn-color-gray-txtup">裁剪</view>
			</view>
			<view class="action" @click="go_toumingdu">
				<view class="bar-icon">
					<view class="tn-icon-deploy tn-color-gray-txtup"></view>
				</view>
				<view class="tn-color-gray-txtup">透明度</view>
			</view>
			<view class="action" @click="copy_elememt">
				<view class="bar-icon">
					<view class="tn-icon-copy tn-color-gray-txtup">
					</view>
				</view>
				<view class="tn-color-gray-txtup">复制</view>
			</view>
		</view>

		<view class="tabbar-b">
			<view class="li li-left">
				<image @click="chexiao"
					:src="chexiao_arr.length == 0 ? '../../../static/resource/ce2.png':'../../../static/resource/ce3.png'"
					mode=""></image>
				<image @click="getcancel" class="backtop-img"
					:src="cancelarr.length == 0 ? '../../../static/resource/ce.png':'../../../static/resource/ce1.png'"
					mode=""></image>
			</view>
			<view class="li">
				<view class="backtop-right" @click="shenhe">
					保存
				</view>
			</view>
		</view>
		<view class="tabbar footerfixed dd-glass">
			<view class="action" @click="change_shoucang_status">
				<view class="bar-icon">
					<view :class="favorite_start == true ? 'tn-color-orangeyellow':'tn-color-gray-zi'"
						class="tn-icon-company">
					</view>
				</view>
				<view class="tn-color-gray-zi">加收藏</view>
			</view>
			<view class="action" @click="add_txt" data-number="18219126666">
				<view class="bar-icon">
					<view class="tn-icon-write tn-color-gray-zi">
					</view>
				</view>
				<view class="tn-color-gray-zi">加文字</view>
			</view>
			<view class="action" @click="go_add_pic()">
				<view class="bar-icon">
					<view class="tn-icon-image tn-color-gray-zi">
					</view>
				</view>
				<view class="tn-color-gray-zi">加图片</view>
			</view>
		</view>

		<!-- 对齐方式 -->
		<view class="duiqi_container" v-if="btn_status[0]==2 && show_status==6">
			<view class="duiqi_container_top">
				<view
					:class="element[btn_status[1]].duiqi == 'left' ? 'duiqi_container_top_item_on':'duiqi_container_top_item'"
					@tap="select_duiqi('left')">
					<image src="../../../static/resource/icon_txt_left.png"></image>
				</view>
				<view
					:class="element[btn_status[1]].duiqi=='center'?'duiqi_container_top_item_on':'duiqi_container_top_item'"
					@tap="select_duiqi('center')">
					<image src="../../../static/resource/icon_txt_center.png"></image>
				</view>
				<view
					:class="element[btn_status[1]].duiqi=='right'?'duiqi_container_top_item_on':'duiqi_container_top_item'"
					@tap="select_duiqi('right')">
					<image src="../../../static/resource/icon_txt_right.png"></image>
				</view>
			</view>
			<view class="duiqi_container_top">
				<view
					:class="element[btn_status[1]].direction==0?'duiqi_container_top_item_on':'duiqi_container_top_item'"
					@tap="select_direction(element[btn_status[1]].direction==1?0:1)">
					<image src="../../../static/resource/icon_txt_heng.png" style="width:34rpx;height:28rpx;"></image>
				</view>
				<view
					:class="element[btn_status[1]].direction==1?'duiqi_container_top_item_on':'duiqi_container_top_item'"
					@tap="select_direction(element[btn_status[1]].direction==1?0:1)">
					<image src="../../../static/resource/icon_txt_shu.png" style="width:28rpx;height:34rpx;"></image>
				</view>
				<view :class="element[btn_status[1]].weight==1?'duiqi_container_top_item_on':'duiqi_container_top_item'"
					@tap="select_bold(element[btn_status[1]].weight==1?0:1)">
					<image src="../../../static/resource/icon_txt_bold.png" style="width:60rpx;height:60rpx;"></image>
				</view>
			</view>
			<view class="jianju_container_top" style="top: 0;">
				<view class="jianju_container_top_item">
					<text>字间距</text>
					<tn-slider activeColor="#666666" blockColor="#666666" :mix="0" :max="100"
						v-model="element[btn_status[1]].letterspacing"></tn-slider>
					<text class="jianju_container_top_item_txt">{{element[btn_status[1]].letterspacing}}</text>
				</view>
				<view class="jianju_container_top_item">
					<text>行间距</text>
					<tn-slider activeColor="#666666" blockColor="#666666" :min='min_lineheight' :max="max_lineheight"
						v-model="element[btn_status[1]].lineheight"></tn-slider>
					<text class="jianju_container_top_item_txt">{{element[btn_status[1]].lineheight}}</text>
				</view>
			</view>
			<view class="txton_container_foot">
				<view class="img_container" @tap="close_edit_ziti">
					<image src="../../../static/resource/icon_dz_txt_close.png" style="width:20rpx;height:20rpx;">
					</image>
				</view>
				<view style="font-size:26rpx;color:rgba(102,102,102,1);">样式</view>
				<view class="img_container" @tap="close_edit_ziti">
					<image src="../../../static/resource/icon_dz_txt_ok.png" style="width:25rpx;height:25rpx;"></image>
				</view>
			</view>
		</view>
		<!-- 选择颜色 -->
		<view class="color_container" v-if="show_status==5">
			<scroll-view class="color_container_top" scrollWithAnimation="true" scroll-y="true">
				<view class="colors_item_off" v-for="(item,index) in colors" @tap="select_color(item)">
					<view :class="element[btn_status[1]].color==item ? 'colors_item':''" class="color_container_top-h"
						:style="{backgroundColor:item}"></view>
				</view>
			</scroll-view>
			<view class="txton_container_foot">
				<view class="img_container" @tap="close_edit_ziti">
					<image src="../../../static/resource/icon_dz_txt_close.png" style="width:20rpx;height:20rpx;">
					</image>
				</view>
				<view style="font-size:26rpx;color:rgba(102,102,102,1);">颜色</view>
				<view class="img_container" @tap="close_edit_ziti">
					<image src="../../../static/resource/icon_dz_txt_ok.png" style="width:25rpx;height:25rpx;"></image>
				</view>
			</view>
		</view>
		<!-- 透明度 -->
		<view class="jianju_container" style="height:200rpx;" v-if="show_status == 7">
			<view class="jianju_container_top" style="height:70rpx;">
				<view class="jianju_container_top_item">
					<text>透明度</text>
					<tn-slider activeColor="#666666" blockColor="#666666" :min='min_lineheight' :max="max_lineheight"
						v-model="element[btn_status[1]].toumingdu"></tn-slider>
					<text>{{element[btn_status[1]].toumingdu}}</text>
				</view>
			</view>
			<view class="txton_container_foot">
				<view class="img_container" @tap="close_edit_ziti">
					<image src="../../../static/resource/icon_dz_txt_close.png" style="width:20rpx;height:20rpx;">
					</image>
				</view>
				<view style="font-size:26rpx;color:rgba(102,102,102,1);">透明度</view>
				<view class="img_container" @tap="close_edit_ziti">
					<image src="../../../static/resource/icon_dz_txt_ok.png" style="width:25rpx;height:25rpx;"></image>
				</view>
			</view>
		</view>
		<!-- 选择字体 -->
		<view class="ziti_container" v-if="show_status==4">
			<scroll-view class="ziti_container_top" scrollWithAnimation="true" scroll-y="true">
				<view class="ziti_container_flex">
					<view v-for="(item,index) in all_ziti" class="ziti_container_flex_bj" v-if="all_ziti.length > 0">
						<image :src="item.image.external_url"
							:style="{height:46 + 'rpx',width:46*all_ziti[0].bili + 'rpx'}"
							:class="element[btn_status[1]].font==item.name?'ziti_item':'ziti_item_off'"
							@tap="select_ziti(index,item.name)">
						</image>
						<image v-if="element[btn_status[1]].font==item.name" class="ziti_container_flex_dui"
							src="../../../static/resource/go1.png"></image>
					</view>
				</view>
			</scroll-view>
			<view class="txton_container_foot">
				<view class="img_container" @tap="close_edit_ziti">
					<image src="../../../static/resource/icon_dz_txt_close.png" style="width:20rpx;height:20rpx;">
					</image>
				</view>
				<view style="font-size:26rpx;color:rgba(102,102,102,1);">字体</view>
				<view class="img_container" @tap="close_edit_ziti">
					<image src="../../../static/resource/icon_dz_txt_ok.png" style="width:25rpx;height:25rpx;"></image>
				</view>
			</view>
		</view>

		<!-- 加图或者换图 -->
		<view class='chang_pics' v-if="show_status==8">
			<view class='chang_pics_title'>
				<view class='chang_pics_title_item' @tap='chang_pics_swith(1)' style='margin-left:40rpx;'>
					<image src='../../../static/resource/icon_dz_wode_on.png' v-if="edit_pics_status==1"></image>
					<image src='../../../static/resource/icon_dz_wode_off.png' v-else></image>
					<text :class="edit_pics_status==0?'off':'on'">我的图片</text>
				</view>
				<view class='chang_pics_title_item' style='margin-left:60rpx;' @tap='chang_pics_swith(0)'>
					<image src='../../../static/resource/icon_dz_xtpics_on.png' v-if="edit_pics_status==0"></image>
					<image src='../../../static/resource/icon_dz_xtpics_off.png' v-else></image>
					<text :class="edit_pics_status==0?'on':'off'">参考图片</text>
				</view>
				<text class='shuoming' @tap='show_more_xtpics'>更多图片 ></text>
			</view>
			<view class='chang_pics_content' v-if="edit_pics_status==1">
				<view class='chang_pics_content_left'>
					<image src='../../../static/resource/icon_dz_upload.png' style='width:91rpx;height:95rpx;'
						@tap='add_pic'></image>
					<text @tap='add_pic'>点击上传</text>
				</view>
				<scroll-view class='chang_pics_content_right' scrollWithAnimation="true" scroll-x="true"
					bindscrolltolower='load_mypic'>
					<view class='chang_pics_content_item' v-for="(item,index) in mpics" @tap='choose_pics(item)'
						v-if="index<(cur_mypic_page*5)">
						<image mode="aspectFit" class='choose_xt_pics' :src='item'></image>
					</view>
				</scroll-view>
			</view>
			<scroll-view class='chang_pics_content_cankao' v-if="edit_pics_status==0" scrollWithAnimation="true"
				scroll-x="true">
				<view class='chang_pics_content_item' v-for="(item,index) in moren_pics" @tap='choose_pics(item)'>
					<image mode="aspectFit" class='choose_xt_pics' :src='item'></image>
					<image class="chang_pics_content_item_img" src='../../../static/resource/icon_dz_pics_selected.png'
						v-if="cur_selected_xtpics==index"></image>
				</view>
			</scroll-view>
		</view>

		<view class='tietu_container' v-if="show_status == 3">
			<scroll-view class='tietu_title_title' scrollWithAnimation="true" scroll-x="true">
				<view v-for="(item,index) in all_xtpics" class="tietu_title_title_item"
					:class="cur_xtpics_index==index?'active':''" @tap='select_xtpics_kind(index)'>{{item.name}}</view>
			</scroll-view>
			<scroll-view class='tietu_title_content' scroll-y="true">
				<view class="tietu_title_content_flex" v-if="all_xtpics.length > 0">
					<image v-for="(item,index) in all_xtpics[cur_xtpics_index].pics" class="tietu_title_content_item"
						@tap='choose_pics(item)' :src="item" lazy-load='true' mode="aspectFit"></image>
				</view>
			</scroll-view>
			<view class="tietu_foot" @tap="close_xtpics">取消</view>
		</view>

		<view class="role_txt_container"
			v-if="member.vip==4 && btn_status[0]==2 && element[btn_status[1]].type==1 && Level == false"
			:style="{top:window_height_rpx/2-210 + 'rpx'}">
			<image
				:src="element[btn_status[1]].model=='tel' ? '../../../static/resource/dz_tel_on.png':'../../../static/resource/dz_tel_off.png'"
				@tap="change_element_mode(element[btn_status[1]].model=='tel'?'':'tel')"></image>
			<image
				:src="element[btn_status[1]].model=='name'? '../../../static/resource/dz_name_on.png':'../../../static/resource/dz_name_off.png'"
				@tap="change_element_mode(element[btn_status[1]].model=='name'?'':'name')"></image>
			<image
				:src="element[btn_status[1]].model=='shopname'? '../../../static/resource/dz_shopname_on.png':'../../../static/resource/dz_shopname_off.png'"
				@tap="change_element_mode(element[btn_status[1]].model=='shopname'?'':'shopname')"></image>
			<image
				:src="element[btn_status[1]].model=='addr'? '../../../static/resource/dz_addr_on.png':'../../../static/resource/dz_addr_off.png'"
				@tap="change_element_mode(element[btn_status[1]].model=='addr'?'':'addr')"></image>
		</view>
		<!-- <view class="role_img_container" v-if="member.vip==4 && btn_status[0]==1 && element[btn_status[1]].type==0"
			:style="{top:window_height_rpx/2-210 + 'rpx'}">
			<image
				:src="element[btn_status[1]].model=='erweima' ? '../../../static/resource/dz_erweima_on.png':'../../../static/resource/dz_erweima_off.png'"
				@tap="change_element_mode(element[btn_status[1]].model=='erweima'?'':'erweima')"></image>
		</view> -->


		<view class='jieguo_view' v-if="status_down== true">
			<view class="jieguo_content">
				<image src="../../../static/resource/bg_dz_bcss.png" class="jieguo_content_bg"></image>
				<view class="jieguo_content_btn_close" @tap="jieguo_content_close"></view>
				<view class="jieguo_tishi">可在”我的设计”页面查看</view>
				<!-- <view v-if="user_info.vip==4">
					<view class="jieguo_tishi_1">您是超级会员</view>
					<view class="jieguo_tishi_2">是否将该作品保存为范例</view>
					<view class="btns_view">
						<view class="btns_view_left" @tap="download_zuopin">下载</view>
						<view class="btns_view_right" @tap="save_fanli">保存</view>
					</view>
				</view>
				<view v-else-if="user_info.vip!=0&&user_info.left!=0">
					<view class="jieguo_tishi_1">{{user_info.msg}}</view>
					<view class="jieguo_tishi_2">今日剩余{{user_info.left}}次</view>
					<view class="btns_view">
						<view class="btns_view_left" @tap="jieguo_content_close">取消</view>
						<view class="btns_view_right" @tap="download_zuopin">下载</view>
					</view>
				</view>
				<view v-else-if="user_info.vip!=0&&user_info.left==0&&user_info.dleft!=0">
					<view class="jieguo_tishi_1">VIP每日免费次数已用完</view>
					<view class="jieguo_tishi_2">可使用拉新获得的{{user_info.dleft}}次</view>
					<view class="btns_view">
						<view class="btns_view_left" @tap="jieguo_content_close">取消</view>
						<view class="btns_view_right" @tap="download_zuopin">下载</view>
					</view>
				</view> -->
				<view>
					<view class="jieguo_tishi_1">可使用免费下载次数1次</view>
					<view class="jieguo_tishi_2">分享给好友可获得更多下载次数</view>
					<view class="btns_view">
						<button open-type="share" class="btns_view_left">分享</button>
						<view class="btns_view_right" @tap="download_zuopin">下载</view>
					</view>
				</view>
				<!-- <view v-else>
					<view class="jieguo_tishi_1">可使用下载次数0次</view>
					<view class="jieguo_tishi_2">分享给好友{{videoAd!=null?'或观看视频':''}}可获得更多下载次数</view>
					<view class="btns_view">
						<button open-type="share" class="btns_view_left" :style="videoAd != null ? '' : 'margin: 0;'">分享</button>
						<view class="btns_view_right" @tap="wana_show_ad" v-if="videoAd!=null">观看</view>
					</view>
				</view> -->
			</view>
		</view>
		<!-- <view class='jieguo_view' v-if="show_status==1&&muban_info.jiage!=0">
			<view class="jieguo_content">
				<image src="../../resource/img/bg_dz_bcss.png" class="jieguo_content_bg"></image>
				<view class="jieguo_content_btn_close" @tap="jieguo_content_close"></view>
				<view class="jieguo_tishi">可在”我的设计”页面查看</view>
				<view v-if="user_info.vip==4">
					<view class="jieguo_tishi_1">您是超级会员</view>
					<view class="jieguo_tishi_2">是否将该作品保存为范例</view>
					<view class="btns_view">
						<view class="btns_view_left" @tap="download_zuopin">下载</view>
						<view class="btns_view_right" @tap="save_fanli">保存</view>
					</view>
				</view>
				<view v-else-if="user_info.vip!=0&&user_info.left!=0">
					<view class="jieguo_tishi_1">{{user_info.msg}}</view>
					<view class="jieguo_tishi_2">今日剩余{{user_info.left}}次</view>
					<view class="btns_view">
						<view class="btns_view_left" @tap="jieguo_content_close">取消</view>
						<view class="btns_view_right" @tap="download_zuopin">下载</view>
					</view>
				</view>
				<view v-else-if="user_info.vip!=0&&user_info.left==0&&user_info.dleft!=0">
					<view class="jieguo_tishi_1">VIP每日免费次数已用完</view>
					<view class="jieguo_tishi_2">可使用拉新获得的{{user_info.dleft}}次</view>
					<view class="btns_view">
						<view class="btns_view_left" @tap="jieguo_content_close">取消</view>
						<view class="btns_view_right" @tap="download_zuopin">下载</view>
					</view>
				</view>
				<view v-else-if="user_info.vip!=0&&user_info.left!=0">
					<view class="jieguo_tishi_1">{{user_info.msg}}</view>
					<view class="jieguo_tishi_2">今日剩余{{user_info.left}}次</view>
					<view class="btns_view">
						<view class="btns_view_left" @tap="jieguo_content_close">取消</view>
						<view class="btns_view_right" @tap="download_zuopin">下载</view>
					</view>
				</view>
				<view v-else-if="user_info.vip!=0&&user_info.left==0&&user_info.dleft==0">
					<view class="jieguo_tishi_1">您的免费下载次数已用完</view>
					<view class="jieguo_tishi_2">分享给好友{{videoAd!=null?'或观看视频':''}}可获得更多下载次数</view>
					<view class="btns_view">
						<button open-type="share" class="btns_view_left" :style="videoAd != null ? '' : 'margin: 0;'">分享</button>
						<view class="btns_view_right" @tap="wana_show_ad" v-if="videoAd!=null">观看</view>
					</view>
				</view>
				<view v-else-if="user_info.vip==0&&has_goumai!=0">
					<view class="jieguo_tishi_1">您已经购买此海报</view>
					<view class="jieguo_tishi_2">可以无限制免费下载</view>
					<view class="btns_view">
						<view class="btns_view_left" @tap="jieguo_content_close">取消</view>
						<view class="btns_view_right" @tap="download_zuopin">下载</view>
					</view>
				</view>
				<view v-else-if="user_info.vip==0&&has_goumai==0&&sys_ios==0">
					<view class="jieguo_tishi_1">您需要购买此海报才能下载</view>
					<view class="jieguo_tishi_2">一次购买永久免费下载此海报</view>
					<view class="btns_view">
						<view class="btns_view_left" @tap="jieguo_content_close">取消</view>
						<view class="btns_view_right" @tap="pay">购买</view>
					</view>
				</view>
				<view v-else-if="user_info.vip==0&&has_goumai==0&&sys_ios==1">
					<view class="jieguo_tishi_1">会员专属海报</view>
					<view class="jieguo_tishi_2">您暂无权限下载</view>
					<view class="btns_view">
						<view class="btns_view_left" @tap="jieguo_content_close">取消</view>
						<button class="btns_view_right" open-type='contact'
							style="margin:0;font-size:32rpx;color:rgba(57,57,57,1);">联系客服</button>
					</view>
				</view>
			</view>
		</view> -->

	</view>
</template>

<script>
	let mlib = require('mlib/mlib.js');
	import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
	import Config from '@/core/config'
	import {
		detail,
		typeface,
		defaultImg,
		designadd,
		download,
		favorite,
		hasfavorite,
		designedit,
		mypiclist
	} from '@/api/poster/index.js'
	import Myimg from '@/components/myimg/index.vue'
	import ztimg from '@/components/ztimg/index.vue'
	import zttxt from '@/components/zttxt/index.vue'
	import mypopup from '@/components/my-popup/index.vue'
	export default {
		name: 'TemplateShop',
		components: {
			Myimg,
			ztimg,
			zttxt,
			mypopup
		},
		mixins: [template_page_mixin],
		data() {
			return {
				elementselectid: -1,
				selectid: 1,
				Level: false,
				pos_initedlist: [],
				popupshow: false,
				startX: 0,
				startY: 0,
				deltaX: 0,
				deltaY: 0,
				maxX: 0, // 可视窗口的最大X值
				maxY: 0, // 可视窗口的最大Y值
				boxHidenAndShow: '',
				zdy: {
					x: 200,
					y: 200
				},
				x: 0,
				y: 0,
				old: {
					x: 0,
					y: 0
				},
				newScale: 1, //记录新的页面缩放大小
				cancelarr: [],
				arrs: [],
				status_down: false,
				show_status: 0, //0初始状态，1显示结果，2显示文字编辑，3显示所有系统图片,4更改字体,5更改文字颜色,6更改对齐方式，7样式选择,8显示修改图片,9修改透明度
				id: 1,
				btn_status: [-1, -1], //-1初始界面,0展示添加/换图，1编辑图片,2展示编辑文字
				edit_pics_status: 1, //0系统图片，1我的图片
				favorite_start:false,//收藏
				muban_info: null,
				muban_info_pics: [],
				frontimg: '',
				window_height_rpx: 0,
				rpx_to_px: 1,
				mb_pic_pos: [], //模板底图位置
				moren_pics: [], //系统图
				mpics: [], //我的图片
				cur_selected_xtpics: 0,
				element: [], //添加的元素
				cur_txt: '', //当前编辑中的文字
				loading_ziti: 0,
				colors: [
					"#000000",
					"#ffffff",
					"#EDAB6F",
					"#D90200",
					"#FC6E2C",
					"#D9D500",
					"#7AC081",
					"#0CB4D1",
					"#0291FA",
					"#E445EA",
					"#5583B5",
					"#1FAE90",
					"#934E0B",
					"#163763",
					"#274285",
					"#C69546",
					"#515254",
					"#9A4C4C",
					"#5890A1"
				],
				user_info: null,
				all_ziti: [],
				zuopinid: 0,
				download_id: 0,
				zuopin_info: null,
				use_font_num: 0,
				//触屏相关
				touch_start_pos: [0, 0],
				touch_status: 0,
				is_move: 0,
				pid: 0,
				all_xtpics: [],
				cur_xtpics_index: 0,
				//是否正在移动元素
				ismoving: 0,
				cur_mypic_page: 1,
				version: 0,
				videoAd: null,
				jili: null,
				dzsetting: {
					downset: 0,
					fenbianlv: 72,
					type: 0,
					uniacid: 5
				},
				max_lineheight: 100,
				min_lineheight: 40,
				yonghu_pics: [],
				stv_yonghu_pics: [],
				bili: 1,
				member: '',
				zuopin_has_inite: 0,
				koutusetting: null,
				can_koutu: 0, //是否可以扣人像图
				can_kouhead: 0, //是否可以扣头像
				can_kougoods: 0, //是否可以扣商品
				koutu_type: -1,
				myfunc: null, //看完广告执行的函数
				yonghu_can_koutu: [],
				yonghu_can_kouhead: [],
				yonghu_can_kougoods: [],
				//分割线相关
				x_cut_num: 3,
				y_cut_num: 3,
				x_cut_arr: [],
				y_cut_arr: [],
				show_wangge: 0,
				start_scale:'',
				//撤销相关
				chexiao_arr: [],
				cur_cstv: null,
				cur_jianju: 0,
				slider_change_start: 0,
				cur_toumingdu: 0,
				cur_ctr_element: null,
				sys_ios: 1,
				displacement: {
					scale: 1
				},
				isDoublefinger: false,
				id: '',
				name: '',
				myzuopinid:'',
				selectedid:''
			};
		},
		computed: {
			translateX() {
				return this.deltaX + 'px'
			},
			translateY() {
				return this.deltaY + 'px'
			}
		},
		watch: {
			boxHidenAndShow(newValue, oldValue) {
				if (!newValue) {
					this.deltaX = 0
					this.deltaY = 0
				}
			}
		},
		onLoad(e) {
			var that = this;
			this.id = e.id
			if(e.myzuopinid){
				this.myzuopinid = e.myzuopinid
				this.id = e.myzuopinid
			}
			this.getall_ziti()
			this.getdefaultImg()
			this.gethasfavorite()

			// #ifdef MP-WEIXIN
			uni.onUserCaptureScreen(function(res) {
				uni.showModal({
					title: '提示',
					content: '定制页面禁止截屏',
					showCancel: false,
					confirmText: '确定',
					success: function(res) {
						uni.navigateBack()
					}
				})
			})
			// #endif
			uni.getSystemInfo({
				success: function(res) {
					if (res.system.indexOf("iOS") != -1) {
						console.log('苹果系统');
					} else {
						that.sys_ios = 0
					}
					var window_height_rpx = res.windowHeight * 750 / res.windowWidth;
					that.rpx_to_px = res.windowWidth / 750;
					that.window_height_rpx = window_height_rpx
				}
			})
		},
		mounted() {
			const {
				windowWidth,
				windowHeight
			} = uni.getSystemInfoSync()
			this.$nextTick(() => {
				const query = uni.createSelectorQuery().in(this);
				query.select('#move_view_tag').boundingClientRect((data) => {
					this.maxX = windowWidth + this.zdy.x - data.width; // 200是元素的宽度
					this.maxY = windowHeight + this.zdy.y - data.height; // 200是元素的高度
					this.deltaX = (windowWidth - data.width) / 2
					this.deltaY = (windowHeight - data.height) / 2
				}).exec();
			})
		},
		methods: {
			postfavorite(){
				favorite({
					form:{
						id:this.id
					}
				}).then((res) => {
					uni.showToast({
						title: res.message,
						duration: 2000,
						icon:'none'
					});
					this.gethasfavorite()
				})
			},
			gethasfavorite(){
				hasfavorite({
					form:{
						id:this.id
					}
				}).then((ruselt) => {
					this.favorite_start = ruselt.data.hasfavorite
				})
			},
			/**
			 * 下载作品
			 */
			download_zuopin: function(e) {
				var that = this;
				uni.getSetting({
					success(res) {
						console.log(res.authSetting['scope.writePhotosAlbum']);
						if (res.authSetting['scope.writePhotosAlbum'] == false) {
							that.data.no_need_refresh = 1;
							uni.openSetting({
								success(res) {
									that.data.no_need_refresh = 0;
									if (res.authSetting['scope.writePhotosAlbum'] == true) {
										that._download_zuopin();
									}
								}
							})
						} else if (res.authSetting['scope.writePhotosAlbum'] == undefined) {
							uni.authorize({
								scope: 'scope.writePhotosAlbum',
								success(res) {
									that._download_zuopin();
								}
							})

						} else {
							that._download_zuopin();
						}
					}
				})
			},
			_download_zuopin: function() {
				var that = this;
				uni.showLoading({
					title: '保存中'
				});
				download({
					id:that.download_id
				}).then(res=>{
					if(res.status == 200){
						uni.getImageInfo({
							src: res.data.url,
							success(res) {
								that.status_down = false
								uni.saveImageToPhotosAlbum({
									filePath: res.path,
									success(res) {
										uni.hideLoading();
										uni.showToast({
											title: '保存成功',
										})
									}
								})
							}
						})
					}
				})
			},
			getdefaultImg() {
				defaultImg().then((res) => {
					this.moren_pics = res.data.data //替换贴图
				})
			},
			multiSelect(e, i) {
				if (e.type == 1) {
					var a = {
						id: 1 + ':' + i,
						index: i
					}
					this.change_focus(a)
					this.update(a)
				} else {
					var a = {
						id: 1 + ':' + i,
						index: i
					}
					this.change_focus(a)
				}
				if (this.selectid == 1) {
					for (var i = 0; i < this.element.length; i++) {
						this.element[i].checkbox = false
					}
					e.checkbox = !e.checkbox;
				} else {
					e.checkbox = !e.checkbox;
				}
				this.$forceUpdate();
			},
			elementselect(e, i) {
				this.elementselectid = i
				if (e.type == 1) {
					var a = {
						id: 1 + ':' + i,
						index: i
					}
					this.change_focus(a)
					this.update(a)
				} else {
					var a = {
						id: 1 + ':' + i,
						index: i
					}
					this.change_focus(a)
				}
			},
			getselect(e) {
				this.selectid = e
			},
			change_element_mode: function(e) {
				var model = e;
				this.element[this.btn_status[1]].model = model;
			},
			shenhe: function() {
				if (this.koutusetting == undefined) {
					this.tijiao();
					return;
				}
				var element = [];
				for (var i = 0; i < this.element.length; ++i) {
					var temp = this.element[i];
					if ((temp.type == 1) && (temp.hasdel == 0)) {
						element.push(temp);
					}
				}
				var that = this;
				var info = {
					'pics': element,
				};
				var data = new Object();
				data.apiname = 'txt';
				data.info = JSON.stringify(info);
				that.tijiao();
			},
			/**
			 * 提交
			 */
			tijiao: function() {
				//获取使用的字体\
				if (20220809 * 1 == this.version * 1) {
					uni.showModal({
						title: '提示',
						content: '您制作的图片已经提交后台审核，审核通过后可下载',
						showCancel: false,
						confirmText: '确定',
						success: function(res) {
							uni.navigateBack()
						}
					})
					return;
				}
				uni.showLoading({
					title: '保存中'
				});
				var use_ziti = [];
				this.element.sort(function(a, b) {
					return a.zindex - b.zindex;
				})
				var element = [];
				for (var i = 0; i < this.element.length; ++i) {
					var temp = this.element[i];
					if (temp.hasdel == 0) {
						element.push(this.element[i]);
					}
					if (temp.type == 1) {
						if (use_ziti.indexOf(temp.font) > -1) {
							continue;
						}
						use_ziti.push(temp.font);
					}
				}
				var that = this;
				var data = new Object();
				data.apiname = 'tijiao';
				data.mbid = this.id;
				data.zuopinid = this.zuopinid;
				var info = {
					'pics': element,
					'rpx2px': this.rpx_to_px,
					'width': this.mb_pic_pos[2],
					'font': use_ziti,
					'yhpics': this.yonghu_pics,
					'yhstv': this.stv_yonghu_pics,
				};
				data.info = JSON.stringify(info);
				var that = this;
				var form = {
					name: this.name,
					mbid: this.id,
					info: data.info,
					icon: this.muban_info.icon,
					id:this.myzuopinid
				};
				if(this.myzuopinid){
					designedit({
						form: form,
						id:this.myzuopinid
					}).then((res) => {
						uni.hideLoading();
						if (res.status == 200) {
							that.download_id = res.data.id
							that.status_down = true
						} else {
							uni.showToast({
								title: res.msg,
								duration: 2000
							});
						}
					})
				}else{
					designadd({
						form: form
					}).then((res) => {
						uni.hideLoading();
						if (res.status == 200) {
							that.download_id = res.data.id
							that.status_down = true
						} else {
							uni.showToast({
								title: res.msg,
								duration: 2000
							});
						}
					})
				}
			},
			getcancel: function() {
				if (this.cancelarr.length == 0) {
					return
				}
				this.chexiao_arr.push(this.cancelarr[this.cancelarr.length - 1])
				var index = this.chexiao_arr.length - 1;
				var cur_chexiao = this.chexiao_arr[index];
				if (cur_chexiao.type == 'element') {
					var element = this.element;
					element[cur_chexiao.index][cur_chexiao.option] = cur_chexiao.oldval;
					this.inite_cankoutu();
				}
				this.cancelarr.pop();
			},
			chexiao: function() {
				if (this.chexiao_arr.length == 0) {
					return
				}
				var index = this.chexiao_arr.length - 1;
				var cur_chexiao = this.chexiao_arr[index];
				if (cur_chexiao.type == 'element') {
					var element = this.element;
					element[cur_chexiao.index][cur_chexiao.option] = cur_chexiao.val;
					this.inite_cankoutu();
				} else if (cur_chexiao.type == 'yhpic') {
					if (cur_chexiao.option == 'img') {
						this.yonghu_pics[cur_chexiao.index] = cur_chexiao.val;
						this.inite_cankoutu();
					} else if (cur_chexiao.option == 'stv') {
						this.stv_yonghu_pics[cur_chexiao.index] = cur_chexiao.val;
					}
				}

				var a = this.chexiao_arr.pop();
				this.cancelarr.push(a)
				if ((cur_chexiao.option == 'letterspacing') || (cur_chexiao.option == 'lineheight')) {
					console.log('初始化字间距行间距');
					this.refresh_txt(cur_chexiao.index);
				}
				this.cancel_all_selected();
			},
			select_xtpics_kind: function(e) {
				this.cur_xtpics_index = e
			},
			close_xtpics: function() {
				this.show_status = 0
			},
			show_more_xtpics: function() {
				this.show_status = 3;
				this.inite_all_xtpics();
			},
			/**
			 * 初始化系统图片
			 */
			inite_all_xtpics: function() {
				if (this.all_xtpics.length == 0) {
					var that = this;
					var data = new Object();
					data.apiname = 'getxtpics';
					mlib.request({
						'model': 'muban',
						'data': data,
						'cachetime': '0',
						success(res) {
							that.all_xtpics = res.data.data
						},
						fail(res) {
							console.log(res);
						}
					})
				}
			},
			/**
			 * 前往剪裁图片
			 */
			go_jiancai: function() {
				mlib.tailor_img = this.element[this.btn_status[1]];
				let a = JSON.stringify(this.element[this.btn_status[1]])
				uni.navigateTo({
					url: '/pages/Posterproject/tailorpic/index?item=' + a
				})
			},
			/**
			 * 剪裁完成
			 */
			finish_tailor: function(stv) {
				var old_val = new Object();
				old_val.offsetX = this.element[this.btn_status[1]].imgStv.offsetX;
				old_val.offsetY = this.element[this.btn_status[1]].imgStv.offsetY;
				old_val.rotate = this.element[this.btn_status[1]].imgStv.rotate;
				old_val.scale = this.element[this.btn_status[1]].imgStv.scale;
				var new_val = new Object();
				new_val.offsetX = stv.offsetX;
				new_val.offsetY = stv.offsetY;
				new_val.rotate = stv.rotate;
				new_val.scale = stv.scale;
				this.add_quxiao(this.btn_status[1], 'imgStv', old_val, new_val);
				this.element[this.btn_status[1]].imgStv = stv;
			},
			/**
			 * 添加图片到服务器
			 */
			add_pic: function() {
				var that = this;
				const apiUrl = Config.get('apiUrl');
				uni.chooseImage({
					count: 1,
					// sizeType: ['original'],
					success: function(res) {
						// var pic = [];
						// var files = [];
						// for (var i = 0; i < res.tempFilePaths.length; ++i) {
						// 	var file_name = mlib.uid + '_' + Date.parse(new Date()) + '_' + i + '.' + mlib
						// 		.suffix(res.tempFilePaths[i]);
						// 	pic.push([res.tempFilePaths[i], file_name]);
						// 	files.push(file_name);
						// }
						uni.uploadFile({
							url: apiUrl + '/api/upload/image', //仅为示例，非真实的接口地址
							filePath: res.tempFilePaths[0],
							name: 'file',
							header: {
								'access-token': uni.getStorageSync('AccessToken')
							},
							success: (res) => {
								that.getmypiclist()
							},
							fail: (err) => {
								console.log('uploadImage fail', err);
								uni.hideLoading();
							}
						});
					},
				})
			},
			/**
			 * 选择图片
			 */
			choose_pics: function(e) {
				var url = e;
				if (this.btn_status[0] == 1) //贴图
				{
					if (this.btn_status[1] == -1) //加图
					{
						var img_new = {
							'zindex': this.get_max_zindex(),
							'hasdel': 0,
							'toumingdu': 100,
							'img': url,
							'cStv': {
								offsetX: 0,
								offsetY: 0,
								scale: 1,
								rotate: 0,
							},
							'imgStv': {
								offsetX: 0,
								offsetY: 0,
								scale: 1,
								rotate: 0,
							},
							'container': [0, 0, 0, 0],
							'type': 0, //代表图片
						}
						this.element.push(img_new);
						var index = this.element.length;
						this.add_quxiao(index - 1, 'hasdel', 1, 0);
						this.btn_status = [1, index - 1]
						this.show_status = 0
					} else {
						if (!this.element[this.btn_status[1]]) {
							return
						}
						var cur_img = this.element[this.btn_status[1]].img;
						this.add_quxiao(this.btn_status[1], 'img', cur_img, url);
						if (cur_img != url) {
							this.element[this.btn_status[1]].img = url;
							this.show_status = 0
						}
					}
				} else if (this.btn_status[0] == 0) //传图区域
				{
					var url = e;
					var cur_img = this.yonghu_pics[this.btn_status[1]];
					this.add_quxiao(this.btn_status[1], 'img', cur_img, url, 'yhpic');
					this.yonghu_pics[this.btn_status[1]] = url;
					this.show_status = 0
				}
				this.inite_cankoutu();
			},
			/**
			 * 改变查看图片种类
			 */
			chang_pics_swith: function(e) {
				var status = e;
				this.edit_pics_status = status
				this.getmypiclist()
			},
			/**
			 * 加图/换图
			 */
			go_add_pic: function(e) {
				var index = e;
				if (index == null) {
					this.btn_status = [1, -1];
				} else {
					this.btn_status = [1, index];
				}
				this.show_status = 8
				this.getmypiclist()
			},
			getmypiclist(){
				mypiclist().then(res=>{
					this.mpics = res.data
				})
			},
			/**
			 * 删除元素
			 */
			del_element: function(e) {
				var btn_status = this.btn_status;
				var element = this.element;
				this.add_quxiao(btn_status[1], 'hasdel', 0, 1);
				element[btn_status[1]].hasdel = 1;
				this.element = element;
				var that = this;
				this.btn_status = [-1, -1]
				this.cancel_all_selected();
			},
			/**
			 * 复制元素
			 */
			copy_elememt: function(e) {
				var btn_status = this.btn_status;
				var element = this.element[btn_status[1]];
				if (element.type == 0) {
					var img_new = {
						'zindex': this.get_max_zindex(),
						'hasdel': 0,
						'img': element.img,
						'zzimg': element.zzimg,
						'toumingdu': element.toumingdu,
						'cStv': {
							offsetX: element.cStv.offsetX + 10,
							offsetY: element.cStv.offsetY + 10,
							scale: element.cStv.scale,
							rotate: element.cStv.rotate,
						},
						'imgStv': {
							offsetX: element.imgStv.offsetX,
							offsetY: element.imgStv.offsetY,
							scale: element.imgStv.scale,
							rotate: element.imgStv.rotate,
						},
						'container': element.container,
						'type': 0, //代表图片
					}
					this.element.push(img_new);
					var index = this.element.length;
					this.btn_status = [1, index - 1];
					this.show_status = 0
				} else {
					var txt_new = {
						'zindex': this.get_max_zindex(),
						'hasdel': 0,
						'txt': element.txt,
						'toumingdu': element.toumingdu,
						'cStv': {
							offsetX: element.cStv.offsetX + 10,
							offsetY: element.cStv.offsetY + 10,
							scale: element.cStv.scale,
							rotate: element.cStv.rotate,
						},
						'type': 1, //代表文字
						'color': element.color,
						'font': element.font,
						'duiqi': element.duiqi,
						'model': element.model,
						'container': element.container,
						'weight': element.weight,
						'direction': element.direction,
						'lineheight': element.lineheight,
						'letterspacing': element.letterspacing,
					}
					this.element.push(txt_new);
					var index = this.element.length;
					this.btn_status = [2, index - 1];
					this.show_status = 0
				}
			},
			/**
			 * 选择字体
			 */
			select_ziti: function(e, s) {
				if (this.loading_ziti == 1) {
					return;
				}
				var index = e;
				var name = this.all_ziti[index].name;
				if (this.all_ziti[index].inite == 0) {
					var all_ziti = this.all_ziti;
					var that = this;
					this.loading_ziti = 1;
					uni.showLoading({
						title: '载入字体中',
					})
					this.add_quxiao(this.btn_status[1], 'font', this.element[this.btn_status[1]].font, name);
					uni.loadFontFace({
						family: all_ziti[index].name,
						source: 'url("' + all_ziti[index].file.external_url + '")',
						success: function(res) {
							that.all_ziti[index].inite = 1;
							that.loading_ziti = 0;
							uni.hideLoading();
							that.element[that.btn_status[1]].font = name;
							that.refresh_txt(that.btn_status[1]);
						},
						fail: function(res) {
							that.loading_ziti = 0;
							uni.hideLoading();
							that.element[that.btn_status[1]].font = name;
							that.refresh_txt(that.btn_status[1]);
						}
					});
				} else {
					this.add_quxiao(this.btn_status[1], 'font', this.element[this.btn_status[1]].font, name);
					this.element[this.btn_status[1]].font = name;
					this.refresh_txt(this.btn_status[1]);
				}
			},
			refresh_txt: function(index) {
				var id = "#element" + index;
				var ele = this.selectComponent(id);
				// if (ele != null && ele != undefined) {
				// 	ele.inite();
				// }
			},
			/**
			 * 打开字体选择界面
			 */
			go_change_ziti: function() {
				if ((this.btn_status[0] != 2) || (this.btn_status[1] < 0) || (this.element[this.btn_status[1]].type !=
						1)) {
					return;
				}
				this.show_status = 4
			},
			/**
			 * 选择颜色
			 */
			select_color: function(e) {
				var color = e;
				this.add_quxiao(this.btn_status[1], 'color', this.element[this.btn_status[1]].color, color);
				this.element[this.btn_status[1]].color = color;
			},
			/**
			 * 前往透明选择界面
			 */
			go_select_toumingdu: function() {
				if ((this.btn_status[0] != 2) || (this.btn_status[1] < 0) || (this.element[this.btn_status[1]].type !=
						1)) {
					return;
				}
				this.show_status = 7
			},
			/**
			 * 前往颜色选择界面
			 */
			go_select_color: function() {
				if ((this.btn_status[0] != 2) || (this.btn_status[1] < 0) || (this.element[this.btn_status[1]].type !=
						1)) {
					return;
				}
				this.show_status = 5
			},
			/**
			 * 关闭文字具体编辑
			 */
			close_edit_ziti: function() {
				this.show_status = 0
			},
			/**
			 * 选择对齐方式
			 */
			select_duiqi: function(e) {
				var duiqi = e;
				this.add_quxiao(this.btn_status[1], 'duiqi', this.element[this.btn_status[1]].duiqi, duiqi);
				this.element[this.btn_status[1]].duiqi = duiqi;
			},
			/**
			 * 选择字体加粗
			 */
			select_bold: function(e) {
				var weight = e;
				this.add_quxiao(this.btn_status[1], 'weight', this.element[this.btn_status[1]].weight, weight);
				this.element[this.btn_status[1]].weight = weight;
			},
			/**
			 * 选择字体方向
			 */
			select_direction: function(e) {
				var direction = e;
				this.add_quxiao(this.btn_status[1], 'direction', this.element[this.btn_status[1]].direction,
					direction);
				this.element[this.btn_status[1]].direction = direction;
			},
			/**
			 * 关闭结果窗口
			 */
			jieguo_content_close: function() {
				this.show_status = 0
				this.popupshow = false
				this.status_down = false
			},
			/**
			 * 文字编辑结束
			 */
			finish_edit_txt: function() {
				if ((this.btn_status[0] != 2) || (this.btn_status[1] < 0) || (this.element[this.btn_status[1]].type !=
						1)) {
					return;
				}
				if (this.cur_txt == '') {
					this.show_status = 0
					this.popupshow = false
					return;
				}
				var str = this.cur_txt.replace(/↵/g, "\n");
				if (str == this.element[this.btn_status[1]].txt) {
					this.show_status = 0
					this.popupshow = false
				} else {
					this.add_quxiao(this.btn_status[1], 'txt', this.element[this.btn_status[1]].txt, str);
					this.element[this.btn_status[1]].txt = str;
					this.show_status = 0
					this.popupshow = false
				}
			},
			/**
			 * 文字输入中，获取输入内容
			 */
			txt_inputing: function(e) {
				this.cur_txt = e
			},
			update(e) {
				this.btn_status = [2, e.index]
			},
			/**
			 * 前往对齐选择界面
			 */
			go_select_duiqi: function() {
				if ((this.btn_status[0] != 2) || (this.btn_status[1] < 0) || (this.element[this.btn_status[1]].type !=
						1)) {
					return;
				}
				this.show_status = 6
			},
			/**
			 * 前往编辑文字
			 */
			go_edit_txt: function() {
				if ((this.btn_status[0] != 2) || (this.btn_status[1] < 0) || (this.element[this.btn_status[1]].type !=
						1)) {
					return;
				}
				this.show_status = 2
				this.popupshow = true
				this.cur_txt = this.element[this.btn_status[1]].txt
			},
			/**
			 * 改变收藏状态
			 */
			change_shoucang_status: function() {
				this.postfavorite()
			},
			error(e) {
				console.log(298, e)
			},
			txt_center_inite: function(e, s) {
				var index = s.index;
				var center = e;
				this.element[index].center = [];
				this.element[index].center[0] = center[0] - 20 - this.mb_pic_pos[0];
				this.element[index].center[1] = center[1] - 120 - this.mb_pic_pos[1];
			},
			/**
			 * 图片stv被改变
			 */
			element_stvChanged: function(e, s) {
				var index = s.index;
				var stv = e;
				this.element[index].cStv = stv;
				this.element[index].yushe = 0;
			},
			add_element_chexiao: function(e, s) {
				var id = s.id.split(':');
				var chexiao = e;
				this.add_quxiao(id[1], 'cStv', chexiao[0], chexiao[1]);
			},
			/**
			 * 换图
			 */
			go_change_pic: function() {
				this.btn_status[0] = 0;
			},
			/**
			 * 焦点改变
			 */
			change_focus: function(e) {
				var id = e.id.split(':');
				this.selectedid = e;
				this.btn_status = [id[0], id[1]]
				this.show_status = 0
			},
			element_pos_inited: function(e, s) {
				var index = s.index;
				var container = e;
				this.element[index].container = container;
			},
			go_up: function(e) {
				if (this.element.length <= 1) {
					return;
				}
				var index = e.index;
				var temp = this.element[index].zindex;
				var element = this.element;
				var min_up = 9999999;
				var min_up_index = -1;
				for (var i = 0; i < element.length; ++i) {
					if ((index != i) && (min_up > element[i].zindex) && (temp < element[i].zindex) && (element[i]
							.hasdel == 0)) {
						min_up = element[i].zindex;
						min_up_index = i;
					}
				}
				if (min_up_index == -1) {
					console.log('已经在最顶层了' + temp);
					return;
				}
				this.element[index].zindex = min_up;
				this.element[min_up_index].zindex = temp;
			},
			go_down: function(e) {
				if (this.element.length <= 1) {
					return;
				}
				var index = e.index;
				var temp = this.element[index].zindex;
				if (temp == 0) {
					console.log('已经在最底层了');
					return;
				}
				var element = this.element;
				var max_down = -1;
				var max_down_index = -1;
				for (var i = 0; i < element.length; ++i) {
					if ((index != i) && (max_down < element[i].zindex) && (temp > element[i].zindex) && (element[i]
							.hasdel == 0)) {
						max_down = element[i].zindex;
						max_down_index = i;
					}
				}
				if (max_down_index == -1) {
					console.log('已经在最底层了' + temp);
					return;
				}
				this.element[index].zindex = max_down;
				this.element[max_down_index].zindex = temp;
			},
			getall_ziti() {
				var that = this;
				typeface().then((res) => {
					that.all_ziti = res.data.list
					detail({
						id: this.myzuopinid ? 0 : this.id,
						zuopinid:this.myzuopinid
					}).then(res => {
						that.inite(res.data.detail);
					})
					defaultImg({
						id: this.id
					}).then(res => {
						that.moren_pics = res.data.data //替换贴图
					})
				})
			},
			/**
			 * 初始化
			 */
			inite(e) {
				this.muban_info = e
				this.name = e.name
				// this.muban_info_pics = e.muban.pics
				this.id = e.id,
					this.member = {
						vip: 4,
						erweima: ''
					}
				this.koutusetting = false

				//判断是否可以抠图
				var koutusetting = e.koutusetting;
				console.log(1559, koutusetting)
				if (koutusetting == undefined) {
					this.can_koutu = 0
				} else if (koutusetting.type == 0) //禁止抠图
				{
					this.can_koutu = 0
				} else if (koutusetting.type == 1) //全部免费抠图
				{
					this.can_koutu = 1
				} else if (koutusetting.type == 2) //看广告抠图
				{
					this.can_koutu = 2
				} else if (koutusetting.type == 3) //会员抠图
				{
					var member = this.member;
					if (member.vip == 0) {
						this.can_koutu = 0
					} else {
						this.can_koutu = 1
					}
				}
				//判断是否可以扣头像
				if (koutusetting == undefined) {
					this.can_kouhead = 0
				} else if (koutusetting.headtype == 0) //禁止抠图
				{
					this.can_kouhead = 0
				} else if (koutusetting.headtype == 1) //全部免费抠图
				{
					this.can_kouhead = 1
				} else if (koutusetting.headtype == 2) //看广告抠图
				{
					if (res.data.data.jili.adid != '') {
						this.can_kouhead = 2
					} else {
						this.can_kouhead = 1
					}
				} else if (koutusetting.headtype == 3) //会员抠图
				{
					var member = this.member;
					if (member.vip == 0) {
						this.can_kouhead = 0
					} else {
						this.can_kouhead = 1
					}
				}
				//判断是否可以扣商品
				if (koutusetting == undefined) {
					this.can_kougoods = 0
				} else if (koutusetting.goodstype == 0) //禁止抠图
				{
					this.can_kougoods = 0
				} else if (koutusetting.goodstype == 1) //全部免费抠图
				{
					this.can_kougoods = 1
				} else if (koutusetting.goodstype == 2) //看广告抠图
				{
					if (e.jili.adid != '') {
						this.can_kougoods = 2
					} else {
						this.can_kougoods = 0
					}
				} else if (koutusetting.goodstype == 3) //会员抠图
				{
					var member = this.member;
					if (member.vip == 0) {
						this.can_kougoods = 0
					} else {
						this.can_kougoods = 1
					}
				}
				if (this.dzsetting.type == 0) //中文
				{
					this.max_lineheight = 100
					this.min_lineheight = 40
				} else if (this.dzsetting.type == 1) //藏文
				{

					this.max_lineheight = 200
					this.min_lineheight = 100
				}
				uni.setNavigationBarTitle({
					title: e.name,
				})
				this.zuopin_info = e.zuopin;
				this.inite_pos();
			},

			/**
			 * 初始化位置信息
			 */
			inite_pos: function() {
				var muban_width = this.muban_info.width;
				var muban_height = this.muban_info.height;
				var max_width = 700;
				var max_heght = this.window_height_rpx - 320;
				if ((muban_width / max_width) <= (muban_height / max_heght)) {
					this.mb_pic_pos[2] = max_heght * muban_width / muban_height;
					this.mb_pic_pos[3] = max_heght;
					this.mb_pic_pos[0] = (max_width - this.mb_pic_pos[2]) / 2;
					this.mb_pic_pos[1] = 0;
					this.mb_pic_pos[4] = max_heght / muban_height;
				} else {
					this.mb_pic_pos[0] = 0;
					this.mb_pic_pos[2] = max_width;
					this.mb_pic_pos[3] = max_width * muban_height / muban_width;
					this.mb_pic_pos[1] = (max_heght - this.mb_pic_pos[3]) / 2;
					this.mb_pic_pos[4] = max_width / muban_width;
				}
				this.inite_cut();
				this.inite_ziti();
				if (this.zuopin_info == null) {
					this.inite_sucai();
				} else {
					this.inite_zuopin();
				}
			},
			/**
			 * 初始化作品信息
			 */
			inite_zuopin: function() {
				var zuopin_info = this.zuopin_info;
				var scale = this.mb_pic_pos[2] / zuopin_info.width;
				scale = scale.toFixed(2);
				//元素
				var pics = zuopin_info.pics;
				for (var i = 0; i < pics.length; ++i) {
					pics[i].hasdel = 0;
					if ((pics[i].toumingdu == null) || (pics[i].toumingdu == undefined) || (pics[i].toumingdu == '')) {
						pics[i].toumingdu = 100;
					}
					if (pics[i].type == 0) //图片
					{
						pics[i].cStv.offsetX = scale * pics[i].cStv.offsetX;
						pics[i].cStv.offsetY = scale * pics[i].cStv.offsetY;
						pics[i].imgStv.offsetX = scale * pics[i].imgStv.offsetX;
						pics[i].imgStv.offsetY = scale * pics[i].imgStv.offsetY;
						if ((pics[i].model == '') || (pics[i].model == null) || (pics[i].model == undefined)) {
							pics[i].model = '';
						} else if (pics[i].model == 'erweima') {
							if ((this.member.erweima != '') && (this.member.erweima != null) && (this.member.erweima !=
									undefined)) {
								pics[i].img = this.member.erweima;
							}
						}
					} else //文字
					{
						if ((pics[i].model == '') || (pics[i].model == null) || (pics[i].model == undefined)) {
							pics[i].model = '';
						} else if (pics[i].model == 'tel') {
							if ((this.member.tel != '') && (this.member.tel != null) && (this.member.tel !=
									undefined)) {
								pics[i].txt = this.member.tel;
								pics[i].yushe = 1;
							}
						} else if (pics[i].model == 'name') {
							if ((this.member.realname != '') && (this.member.realname != null) && (this.member
									.realname != undefined)) {
								pics[i].txt = this.member.realname;
								pics[i].yushe = 1;
							}
						} else if (pics[i].model == 'shopname') {
							if ((this.member.shopname != '') && (this.member.shopname != null) && (this.member
									.shopname != undefined)) {
								pics[i].txt = this.member.shopname;
								pics[i].yushe = 1;
							}
						} else if (pics[i].model == 'addr') {
							if ((this.member.addr != '') && (this.member.addr != null) && (this.member.addr !=
									undefined)) {
								pics[i].txt = this.member.addr;
								pics[i].yushe = 1;
							}
						}
						pics[i].cStv.offsetX = scale * pics[i].cStv.offsetX;
						pics[i].cStv.offsetY = scale * pics[i].cStv.offsetY;
						pics[i].cStv.scale = scale * pics[i].cStv.scale;
						if ((pics[i].weight == null) || (pics[i].weight == undefined) || (pics[i].weight == '')) {
							pics[i].weight = 0;
						}
						if ((pics[i].direction == null) || (pics[i].direction == undefined) || (pics[i].direction ==
								'')) {
							pics[i].direction = 0;
						}
						if ((pics[i].lineheight == null) || (pics[i].lineheight == undefined) || (pics[i].lineheight ==
								'')) {
							pics[i].lineheight = this.min_lineheight;
						}
						if ((pics[i].letterspacing == null) || (pics[i].letterspacing == undefined) || (pics[i]
								.letterspacing == '')) {
							pics[i].letterspacing = 0;
						}
					}
				}
				if ((zuopin_info.yhpics == null) || (zuopin_info.yhpics == undefined)) {
					zuopin_info.yhpics = [];
				}
				if ((zuopin_info.yhstv == null) || (zuopin_info.yhstv == undefined)) {
					zuopin_info.yhstv = [];
				}
				this.yonghu_pics = zuopin_info.yhpics
				this.stv_yonghu_pics = zuopin_info.yhstv
				this.bili = scale
				for (var i = 0; i < pics.length; i++) {
					pics[i]['checkbox'] = false
				}
				this.element = pics;
				this.inite_zindex();
				this.inite_cankoutu();
			},
			inite_sucai: function() {
				var element = [];
				var muban_info = this.muban_info
				var goods_pic_pos = this.mb_pic_pos;
				var sucai = muban_info.sucai;
				var moren_pics = this.moren_pics;
				var _stv = {
					offsetX: 0,
					offsetY: 0,
					scale: 1,
					rotate: 0,
				};
				if ((muban_info.pics != null) && (muban_info.pics != undefined) && (muban_info.pics != '')) {
					var temp_pics = [];
					var temp_stv = [];
					for (var i = 0; i < muban_info.pics.length; ++i) {
						temp_pics.push(muban_info.pics[i][0]);
						temp_stv.push(_stv)
					}
					this.yonghu_pics = temp_pics
					this.stv_yonghu_pics = temp_stv
				}
				for (var j = 0; j < sucai.length; ++j) {
					var pic_width = sucai[j][3];
					var pic_height = sucai[j][4];
					var max_width = goods_pic_pos[2] / 2;
					var max_heght = goods_pic_pos[3] / 2;
					var pos_inited = [];
					if ((pic_width / max_width) <= (pic_height / max_heght)) {
						pos_inited[2] = max_heght * pic_width / pic_height;
						pos_inited[3] = max_heght;
						pos_inited[0] = (max_width - pos_inited[2]) / 2 + max_width / 2;
						pos_inited[1] = max_heght / 2;
					} else {
						pos_inited[0] = max_width / 2;
						pos_inited[2] = max_width;
						pos_inited[3] = max_width * pic_height / pic_width;
						pos_inited[1] = (max_heght - pos_inited[3]) / 2 + max_heght / 2;
					}
					var scale = sucai[j][3] * goods_pic_pos[2] / (pos_inited[2] * muban_info.width)
					var want_x = sucai[j][1] * goods_pic_pos[2] / muban_info.width;
					var want_y = sucai[j][2] * goods_pic_pos[3] / muban_info.height;
					var real_x = pos_inited[0] + (1 - scale) * pos_inited[2] / 2;
					var real_y = pos_inited[1] + (1 - scale) * pos_inited[3] / 2;
					// var offsetX=
					var img_new = {
						'hasdel': 0,
						'img': sucai[j][0],
						'toumingdu': 100,
						'cStv': {
							offsetX: want_x - real_x,
							offsetY: want_y - real_y,
							scale: scale,
							rotate: 0,
						},
						'imgStv': {
							offsetX: 0,
							offsetY: 0,
							scale: 1,
							rotate: 0,
						},
						'container': [0, 0, 0, 0],
						'type': 0, //代表图片
						'model': '',
					}
					element.push(img_new);
				}
				this.element = element;
				this.inite_zindex();
				this.inite_cankoutu();
			},
			inite_cankoutu: function() {
				var yonghu_pics = this.yonghu_pics;
				var yonghu_can_koutu = [];
				var yonghu_can_kouhead = [];
				var yonghu_can_kougoods = [];
				for (var i = 0; i < yonghu_pics.length; ++i) {
					if (yonghu_pics[i].indexOf("/images/mypics") == -1) {
						yonghu_can_koutu.push(0);
					} else {
						yonghu_can_koutu.push(1);
					}
					if ((yonghu_pics[i].indexOf("/images/mypics") == -1) && (yonghu_pics[i].indexOf(
							"/images/koutu/") == -1)) {
						yonghu_can_kouhead.push(0);
					} else {
						yonghu_can_kouhead.push(1);
					}
					if (yonghu_pics[i].indexOf("/images/mypics") == -1) {
						yonghu_can_kougoods.push(0);
					} else {
						yonghu_can_kougoods.push(1);
					}
				}
				var element = this.element;
				for (var i = 0; i < element.length; ++i) {
					if (element[i].type == 0) //图片
					{
						if (element[i].img.indexOf("/images/mypics") == -1) {
							element[i].cankoutu = 0;
						} else {
							element[i].cankoutu = 1;
						}
						if ((element[i].img.indexOf("/images/mypics") == -1) && (element[i].img.indexOf(
								"/images/koutu/") == -1)) {
							element[i].cankouhead = 0;
						} else {
							element[i].cankouhead = 1;
						}
						if (element[i].img.indexOf("/images/mypics") == -1) {
							element[i].cankougoods = 0;
						} else {
							element[i].cankougoods = 1;
						}
					}
				}
				this.yonghu_can_koutu = yonghu_can_koutu;
				this.element = element;
				this.yonghu_can_kouhead = yonghu_can_kouhead;
				this.yonghu_can_kougoods = yonghu_can_kougoods
			},
			inite_zindex: function() {
				var element = this.element;
				for (var i = 0; i < element.length; ++i) {
					element[i].zindex = i;
				}
				this.element = element
			},
			inite_ziti: function() {
				var all_ziti = this.all_ziti;
				all_ziti[0].index = 0;
				var need_inite_font = [all_ziti[0]];
				var use_font = [];
				if (this.zuopin_info != null) {
					var use_font = this.zuopin_info.font;
				}
				for (var i = 1; i < all_ziti.length; ++i) {
					all_ziti[i].inite = 0;
					if (use_font.indexOf(all_ziti[i].name) > -1) {
						all_ziti[i].index = i;
						need_inite_font.push(all_ziti[i]);
					}
				}
				this.use_font_num = need_inite_font.length;
				var that = this;
				uni.showLoading({
					title: '载入字体中',
				})
				for (var i = 0; i < need_inite_font.length; ++i) {
					var temp_index = need_inite_font[i].index;
					uni.loadFontFace({
						family: need_inite_font[i].name,
						source: 'url("' + need_inite_font[i].file.external_url + '")',
						success: function(res) {
							that.use_font_num--;
							that.inite_element();
							all_ziti[temp_index].inite = 1;
							that.all_ziti = all_ziti
						},
						fail: function(res) {
							that.use_font_num--;
							that.inite_element();
						}
					});
				}
			},
			inite_element: function() {
				console.log('inite_element');
				if (this.use_font_num > 0) {
					return;
				}
				if (this.zuopin_has_inite == 1) {
					return;
				}
				uni.hideLoading();
				this.zuopin_has_inite = 1;
				var element = this.element;
				for (var i = 0; i < element.length; ++i) {
					if (element[i].type == 1) //文字
					{
						element[i].hasninitefont = 1;
					}
				}
				this.element = element
			},
			inite_ad: function() {
				var that = this;
				if (uni.createRewardedVideoAd) {
					var videoAd = uni.createRewardedVideoAd({
						adUnitId: that.jili.adid
					})
					videoAd.onLoad(() => {
						that.videoAd = videoAd
					})
					videoAd.onError((err) => {
						console.log('广告初始化失败');
					})
					videoAd.onClose((res) => {
						if (res && res.isEnded) {
							if (that.myfunc != null) {
								that.myfunc = null;
							} else {
								that.add_download_cishu();
							}
						} else {
							that.myfunc = null;
						}
					})
				} else {
					console.log('激励视频广告不能调用');
				}
			},
			add_download_cishu: function() {
				var that = this;
				var data = new Object();
				data.apiname = 'jili';
				this.$Microengine.mlib.request({
					'model': 'fenxiao',
					'data': data,
					'cachetime': '0',
					success(res) {
						that.user_info.left = that.user_info.left * 1 + that.jili.cishu * 1;
					},
					fail(res) {
						console.log(res);
					}
				})
			},
			inite_cut: function() {
				var mb_pic_pos = this.mb_pic_pos;
				var x_cut_num = 10;
				var x_cut_arr = [];
				var y_cut_arr = [];
				var item_width = mb_pic_pos[2] / x_cut_num;
				item_width = item_width.toFixed(0);
				for (var i = item_width; i < mb_pic_pos[2];) {
					x_cut_arr.push(i);
					i = i * 1 + item_width * 1;
				}
				for (var i = item_width; i < mb_pic_pos[3];) {
					y_cut_arr.push(i);
					i = i * 1 + item_width * 1;
				}
				this.x_cut_arr = x_cut_arr
				this.y_cut_arr = y_cut_arr
			},
			tn(e) {
				uni.navigateTo({
					url: e,
				});
			},
			openLocation() {
				uni.openLocation({
					longitude: 113.3298396012573,
					latitude: 22.961803525530176,
					name: '祈福新村',
					address: '祈福新村'
				})
			},
			/**
			 * 加字
			 */
			add_txt: function() {
				if (this.dzsetting.type == 0) //中文
				{
					var txt = '添加文字';
					var lineheight = 40;
				} else if (this.dzsetting.type == 1) //藏文
				{
					var txt = 'བོད་པར་མཉེན་ཆས།';
					var lineheight = 100;
				}
				var txt_new = {
					'zindex': this.get_max_zindex(),
					'hasdel': 0,
					'toumingdu': 100,
					'txt': txt,
					'cStv': {
						offsetX: 0,
						offsetY: 0,
						scale: 1,
						rotate: 0,
					},
					'type': 1, //代表文字
					'color': this.colors[0],
					'font': this.all_ziti[0].name,
					'duiqi': 'left',
					'model': '',
					'container': [0, 0, 0, 0],
					'weight': 0,
					'direction': 0,
					'lineheight': lineheight,
					'letterspacing': 0
				}
				this.element.push(txt_new);
				var index = this.element.length - 1;
				this.add_quxiao(index, 'hasdel', 1, 0);
				this.btn_status = [2, index]
			},

			get_max_zindex: function() {
				var element = this.element;
				var max_zindex = 0;
				for (var i = 0; i < element.length; ++i) {
					if (element[i].zindex > max_zindex) {
						max_zindex = element[i].zindex;
					}
				}
				max_zindex++;
				return max_zindex;
			},

			// 弹出模态框1
			showModal(event) {
				this.openModal()
			},
			// 打开模态框
			openModal() {
				this.show1 = true
			},
			handleTouchStart(e) {
				if (e.touches && e.touches.length == 2) {
					if (this.btn_status[0] != -1) {
						e.currentTarget.dataset.type = 3
						this.$refs.ztimg[this.selectedid.index].touchstart(e)
						return;
					}
					
					this.isDoublefinger = true
					var touches = e.touches;
					var events = touches[0];
					var events2 = touches[1];
					// 第一个触摸点的坐标
					this.displacement.pageX = events.pageX;
					this.displacement.pageY = events.pageY;
					this.displacement.moveable = true;
					if (events2) {
						this.displacement.pageX2 = events2.pageX;
						this.displacement.pageY2 = events2.pageY;
					}
					this.displacement.originScale = this.displacement.scale || 1;
					e.preventDefault();
					return
				}
				if (this.isDoublefinger) {
					return
				}
				if (this.btn_status[0] == -1 && this.btn_status[1] == -1) {
					const {
						clientX,
						clientY
					} = e.touches[0];
					this.startX = clientX;
					this.startY = clientY;
					return
				}



				if ((this.btn_status[0] != 1) && (this.btn_status[0] != 2) && (this.btn_status[0] != 0)) {
					if (e.touches.length > 1 && this.btn_status[0] == -1 && this.btn_status[1] == -1) {
						let xMove = e.touches[1].clientX - e.touches[0].clientX;
						let yMove = e.touches[1].clientY - e.touches[0].clientY;
						//计算开始触发两个手指坐标的距离
						this.distance = Math.sqrt(xMove * xMove + yMove * yMove)
					}
					return;
				}
				if (this.btn_status[0] == 0) //操作用户传图
				{
					var cstv = {
						offsetX: this.stv_yonghu_pics[this.btn_status[1]].offsetX,
						offsetY: this.stv_yonghu_pics[this.btn_status[1]].offsetY,
						rotate: this.stv_yonghu_pics[this.btn_status[1]].rotate,
						scale: this.stv_yonghu_pics[this.btn_status[1]].scale,
					}
					this.cur_cstv = cstv;
				} else //不是操作用户传图
				{
					var cstv = {
						offsetX: this.element[this.btn_status[1]].cStv.offsetX,
						offsetY: this.element[this.btn_status[1]].cStv.offsetY,
						rotate: this.element[this.btn_status[1]].cStv.rotate,
						scale: this.element[this.btn_status[1]].cStv.scale,
					}
					this.cur_cstv = cstv;
				}
				if (e.touches.length == 1) {
					this.is_move = 0;
					this.touch_status = 0;
					this.touch_start_pos[0] = e.touches[0].pageX;
					this.touch_start_pos[1] = e.touches[0].pageY;
				} else {
					this.is_move = -1;
					this.touch_status = 1;
					var diff_x = e.touches[0].clientX - e.touches[1].clientX;
					var diff_y = e.touches[0].clientY - e.touches[1].clientY;
					let x = Math.pow(diff_x, 2)
					let y = Math.pow(diff_y, 2)
					this.start_distance = Math.sqrt(x + y);
					if (this.btn_status[0] == 0) {
						this.start_scale = this.stv_yonghu_pics[this.btn_status[1]].scale;
						this.start_angle = 360 * Math.atan(diff_y / diff_x) / (2 * Math.PI) - this.stv_yonghu_pics[this
							.btn_status[1]].rotate;
					} else {
						var stv = this.element[this.btn_status[1]].cStv;
						this.start_scale = stv.scale;
					}
				}
			},
			handleTouchMove(e) {
				if (e.touches && e.touches.length == 2) {
					if (this.btn_status[0] != -1) {
						e.currentTarget.dataset.type = 3
						this.$refs.ztimg[this.selectedid.index].touchmove(e)
						return;
					}
					if (!this.displacement.moveable) {
						return;
					}

					e.preventDefault();

					var touches = e.touches;
					var events = touches[0];
					var events2 = touches[1];
					// 双指移动
					if (events2) {
						// 第2个指头坐标在touchmove时候获取
						if (!this.displacement.pageX2) {
							this.displacement.pageX2 = events2.pageX;
						}
						if (!this.displacement.pageY2) {
							this.displacement.pageY2 = events2.pageY;
						}

						// 双指缩放比例计算
						var zoom =
							this.getDistance({
								x: events.pageX,
								y: events.pageY
							}, {
								x: events2.pageX,
								y: events2.pageY
							}) /
							this.getDistance({
								x: this.displacement.pageX,
								y: this.displacement.pageY
							}, {
								x: this.displacement.pageX2,
								y: this.displacement.pageY2
							});
						// 应用在元素上的缩放比例
						var newScale = this.displacement.originScale * zoom;
						// 最大缩放比例限制
						if (newScale > 1.5) {
							newScale = 1.5;
						}

						// 最小缩放比例限制
						if (newScale < 0.5) {
							newScale = 0.5;
						}
						// 记住使用的缩放值
						this.displacement.scale = newScale;
						this.newScale = newScale
						
						// 图像应用缩放效果
					}
					return
				}
				if (this.btn_status[0] == -1 && this.btn_status[1] == -1) {
					const {
						clientX,
						clientY
					} = e.touches[0];
					let newDeltaX = this.deltaX + clientX - this.startX;
					let newDeltaY = this.deltaY + clientY - this.startY;
					if (newDeltaX < -this.zdy.x) {
						newDeltaX = -this.zdy.x;
					} else if (newDeltaX > this.maxX) {
						newDeltaX = this.maxX;
					}
					if (newDeltaY < -this.zdy.y) {
						newDeltaY = -this.zdy.y;
					} else if (newDeltaY > this.maxY) {
						newDeltaY = this.maxY;
					}
					this.deltaX = newDeltaX;
					this.deltaY = newDeltaY;
					this.startX = clientX;
					this.startY = clientY;
					return
				}


				var rpx_to_px = this.rpx_to_px;
				if (this.btn_status[0] == -1) {
					return;
				}
				// #ifndef H5
				if (this.ismoving == 0) {
					this.ismoving = 1
				}
				// #endif

				//单点触摸
				if (this.touch_status == 0) {
					this.is_move = 1;
					var change_x = e.touches[0].pageX - this.touch_start_pos[0];
					var change_y = e.touches[0].pageY - this.touch_start_pos[1];
					change_x = change_x / rpx_to_px;
					change_y = change_y / rpx_to_px;
					if (this.btn_status[0] == 0) {
						this.stv_yonghu_pics[this.btn_status[1]].offsetX += change_x;
						this.stv_yonghu_pics[this.btn_status[1]].offsetY += change_y;
					} else {
						var stv = this.element[this.btn_status[1]].cStv;
						stv.offsetX += change_x;
						stv.offsetY += change_y;
						this.element[this.btn_status[1]].cStv = stv;
					}
					this.touch_start_pos[0] = e.touches[0].pageX;
					this.touch_start_pos[1] = e.touches[0].pageY;
				} else //多点触摸
				{
					if (e.touches.length == 1) {
						return;
					}
					var diff_x = e.touches[0].clientX - e.touches[1].clientX;
					var diff_y = e.touches[0].clientY - e.touches[1].clientY;
					let x = Math.pow(diff_x, 2)
					let y = Math.pow(diff_y, 2)
					//缩放
					var dis = Math.sqrt(x + y);
					if (this.btn_status[0] == 0) {
						//旋转
						var angle = 360 * Math.atan(diff_y / diff_x) / (2 * Math.PI);
						var stv = this.stv_yonghu_pics[this.btn_status[1]];
						this.stv_yonghu_pics[this.btn_status[1]].scale = this.start_scale + this.start_scale * (dis -
							this
							.start_distance) / this.start_distance;
						if (Math.abs(this.stv_yonghu_pics[this.btn_status[1]].rotate - angle + this.start_angle) <=
							90) {
							this.stv_yonghu_pics[this.btn_status[1]].rotate = angle - this.start_angle;
						}
					} else {
						var stv = this.element[this.btn_status[1]].cStv;
						stv.scale = this.start_scale + this.start_scale * (dis - this.start_distance) / this
							.start_distance;
						this.element = element
					}
				}
			},
			getDistance(start, stop) {
				// Math.hypot()计算参数的平方根
				return Math.hypot(stop.x - start.x, stop.y - start.y);
			},
			del_pic: function(e) {
				var ids = e.id.split(":");
				var element = this.element;
				element[ids[1]].hasdel = 1;
				this.element = element
				this.cancel_all_selected()
			},
			/**
			 * 取消所有选中状态
			 */
			cancel_all_selected: function() {
				this.btn_status = [-1, -1]
				this.show_status = 0
			},
			/**
			 * 触摸结束
			 */
			touchend: function(e) {
				//点击未移动
				if (this.isDoublefinger) {
					this.isDoublefinger = false
				}
				if (this.is_move == 0) {
					if ((this.btn_status[0] == 0) && (this.btn_status[1] != -1)) //正在换图
					{
						console.log('正在换图');
					}
				} else {
					if (this.cur_cstv != null) {
						if (this.btn_status[0] == 0) //操作用户传图
						{
							var cstv = {
								offsetX: this.stv_yonghu_pics[this.btn_status[1]].offsetX,
								offsetY: this.stv_yonghu_pics[this.btn_status[1]].offsetY,
								rotate: this.stv_yonghu_pics[this.btn_status[1]].rotate,
								scale: this.stv_yonghu_pics[this.btn_status[1]].scale,
							}
							this.add_quxiao(this.btn_status[1], 'stv', this.cur_cstv, cstv, 'yhpic');
						} else {
							var cstv = {
								offsetX: this.element[this.btn_status[1]].cStv.offsetX,
								offsetY: this.element[this.btn_status[1]].cStv.offsetY,
								rotate: this.element[this.btn_status[1]].cStv.rotate,
								scale: this.element[this.btn_status[1]].cStv.scale,
							}
							this.add_quxiao(this.btn_status[1], 'cStv', this.cur_cstv, cstv);
						}
						this.cur_cstv = null;
					}
					this.ismoving = 0
				}
			},
			add_quxiao: function(index, option = '', val, oldval, type = 'element') {
				var temp = new Object();
				temp.index = index;
				temp.val = val;
				temp.oldval = oldval;
				temp.option = option;
				temp.type = type;
				this.chexiao_arr.push(temp);
				this.arrs.push(temp);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.jieguo_view {
		width: 750rpx;
		height: 100%;
		position: fixed;
		left: 0rpx;
		top: 0rpx;
		background-color: rgba(0, 0, 0, 0.3);
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		z-index: 999;
	}

	.jieguo_content {
		width: 504rpx;
		height: 578rpx;
		position: relative;
	}

	.jieguo_content_bg {
		width: 504rpx;
		height: 578rpx;
		position: absolute;
		left: 0rpx;
		top: 0rpx;
	}

	.jieguo_content_btn_close {
		width: 80rpx;
		height: 80rpx;
		position: absolute;
		top: 0rpx;
		right: 0rpx;
	}

	.jieguo_tishi {
		font-size: 28rpx;
		font-family: Adobe Heiti Std;
		font-weight: normal;
		color: rgba(51, 51, 51, 1);
		position: absolute;
		left: 49rpx;
		top: 114rpx;
	}

	.jieguo_tishi_1 {
		width: 504rpx;
		position: absolute;
		left: 0rpx;
		top: 295rpx;
		text-align: center;
		height: 34rpx;
		line-height: 34rpx;
		font-size: 36rpx;
		font-family: SimHei;
		font-weight: 400;
		color: rgba(68, 68, 68, 1);
	}

	.jieguo_tishi_2 {
		width: 484rpx;
		position: absolute;
		left: 10rpx;
		top: 354rpx;
		text-align: center;
		height: 31rpx;
		font-size: 32rpx;
		font-family: SimHei;
		font-weight: 400;
		color: rgba(56, 56, 56, 1);
	}

	.btns_view {
		width: 504rpx;
		position: absolute;
		left: 0rpx;
		top: 458rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.btns_view_left {
		width: 186rpx;
		height: 76rpx;
		line-height: 76rpx;
		text-align: center;
		border: 2rpx solid rgba(201, 208, 218, 1);
		border-radius: 10rpx;
		margin: 0 40rpx 0 0;
		font-size: 32rpx;
		font-family: SimHei;
		font-weight: 400;
		color: rgba(57, 57, 57, 1);
	}

	.btns_view_right {
		width: 190rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background: rgba(255, 221, 2, 1);
		border-radius: 10rpx;
	}

	.role_txt_container {
		width: 80rpx;
		height: 380rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		position: fixed;
		right: 30rpx;
		top: 500rpx;
		z-index: 999;

		image {
			width: 80rpx;
			height: 80rpx;
		}
	}

	.role_img_container {
		width: 80rpx;
		height: 80rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		position: fixed;
		right: 30rpx;
		top: 500rpx;
		z-index: 999;

		image {
			width: 80rpx;
			height: 80rpx;
		}
	}

	.tietu_container {
		width: 750rpx;
		height: 70%;
		position: absolute;
		bottom: 0rpx;
		background-color: #F3F3F3;
		margin-bottom: 40rpx;
		overflow: hidden;
		z-index: 999;

		.tietu_title_title {
			width: 750rpx;
			padding: 15rpx;
			height: 80rpx;
			overflow: hidden;
			white-space: nowrap;
			border-bottom: solid 1rpx #F3F3F3;
			position: relative;
			background-color: white;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			z-index: 9;
		}

		.tietu_title_title_item {
			display: inline-block;
			height: 46rpx;
			line-height: 46rpx;
			text-align: center;
			padding-right: 17rpx;
			padding-left: 17rpx;
			background: rgba(249, 249, 249, 1);
			border-radius: 10rpx;
			font-size: 24rpx;
			font-family: SimHei;
			font-weight: 400;
			color: rgba(96, 96, 96, 1);
			margin-right: 24rpx;
		}

		.active {
			color: #fff;
			background-color: #0083fd;
		}

		.tietu_title_content {
			width: 700rpx;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			top: 70rpx;
			bottom: 100rpx;
		}

		.tietu_title_content_flex::after {
			content: '';
			width: 200rpx;
		}

		.tietu_title_content_flex {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			flex-wrap: wrap;
		}

		.tietu_title_content_item {
			width: 200rpx;
			margin-top: 20rpx;
			height: 200rpx;
			border: 2rpx solid #ccc;
		}

		.tietu_foot {
			width: 750rpx;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			font-size: 30rpx;
			font-family: SimHei;
			font-weight: 400;
			color: #565656;
			background-color: #FFF602;
			position: fixed;
			left: 0rpx;
			bottom: 0rpx;
			padding-bottom: calc(env(safe-area-inset-bottom) - 14px)
		}
	}

	.chang_pics {
		width: 750rpx;
		height: 392rpx;
		position: fixed;
		left: 0rpx;
		bottom: 0rpx;
		background-color: white;
		z-index: 999;
		padding-bottom: calc(env(safe-area-inset-bottom) - 14px);

		.chang_pics_title {
			width: 750rpx;
			height: 120rpx;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
		}

		.chang_pics_title_item {
			height: 100rpx;
			width: 96rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			image {
				width: 34rpx;
				height: 34rpx;
				margin-bottom: 15rpx;
			}

			.on {
				height: 24rpx;
				line-height: 24rpx;
				font-size: 24rpx;
				font-family: PingFangSC-Regular;
				font-weight: 400;
				color: #333333;
				border-bottom: 8rpx solid #FFDD02;
			}

			.off {
				height: 24rpx;
				line-height: 24rpx;
				font-size: 24rpx;
				font-family: PingFangSC-Regular;
				font-weight: 400;
				color: #979797;
				border-bottom: 8rpx solid rgba(0, 0, 0, 0);
			}

			.chang_pics_content_left {
				box-shadow: 0px 10rpx 30rpx rgb(236, 246, 253) inset;
				width: 200rpx;
				height: 272rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				text {
					font-size: 18rpx;
					font-family: PingFangSC-Regular;
					font-weight: 400;
					color: #333333;
					margin-top: 12rpx;
				}
			}

		}



		.chang_pics_content_right {
			width: 510rpx;
			height: 192rpx;
			background-color: #E6F4FF;
			padding: 40rpx 0rpx 40rpx 40rpx;
		}

		.chang_pics_content_cankao {
			width: 750rpx;
			height: 100%;
			display: flex;
			flex-direction: row;
			justify-content: flex-end;
			align-items: center;
			white-space: nowrap;
			overflow: hidden;
			position: relative;
			padding: 40rpx 0rpx 40rpx 40rpx;
			background-color: #FEFBE4;
		}

		.chang_pics_content_item {
			width: 140rpx;
			height: 156rpx;
			margin-right: 20rpx;
			border-radius: 10rpx;
			display: inline-block;
			position: relative;
			overflow: hidden;

			.chang_pics_content_item_img {
				width: 30rpx;
				height: 34rpx;
				position: absolute;
				right: 0rpx;
				bottom: 0rpx;
			}

			.choose_xt_pics {
				width: 137rpx;
				height: 150rpx;
				border: 2rpx solid #ccc;
			}

			image {
				width: 34rpx;
				height: 34rpx;
				margin-bottom: 15rpx;
			}

			.on {
				height: 24rpx;
				line-height: 24rpx;
				font-size: 24rpx;
				font-family: PingFangSC-Regular;
				font-weight: 400;
				color: #333333;
				border-bottom: 8rpx solid #FFDD02;
			}

			.off {
				height: 24rpx;
				line-height: 24rpx;
				font-size: 24rpx;
				font-family: PingFangSC-Regular;
				font-weight: 400;
				color: #979797;
				border-bottom: 8rpx solid rgba(0, 0, 0, 0);
			}
		}

		.chang_pics_content {
			width: 750rpx;
			height: 272rpx;
			display: flex;
			flex-direction: row;
			// justify-content: flex-end;
			align-items: center;
			white-space: nowrap;
			overflow: hidden;
			position: relative;
		}

		.chang_pics_content_left {
			box-shadow: 0px 10rpx 30rpx rgb(236, 246, 253) inset;
			width: 200rpx;
			height: 272rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}

		.chang_pics_content_left text {
			font-size: 18rpx;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			color: #333333;
			margin-top: 12rpx;
		}

		.chang_pics_content_right {
			flex: 1;
			height: 272rpx;
			background: rgba(255, 234, 237, 1);
			padding: 40rpx 0rpx 40rpx 40rpx;
		}

		.shuoming {
			font-size: 24rpx;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			color: #333333;
			position: absolute;
			right: 30rpx;
			line-height: 120rpx;
		}
	}

	.ziti_container {
		width: 750rpx;
		height: 370rpx;
		background-color: #FAFAFA;
		position: fixed;
		left: 0rpx;
		bottom: 0rpx;
		z-index: 999;
		padding-bottom: calc(env(safe-area-inset-bottom) - 14px);

		.ziti_container_top {
			width: 750rpx;
			height: 300rpx;
			position: absolute;
			top: 0rpx;
			left: 0rpx;
		}

		.ziti_container_flex {
			display: flex;
			flex-wrap: wrap;
			padding: 20rpx 10rpx;
			justify-content: space-between;
		}

		.ziti_container_flex::after {
			content: '';
			width: 220rpx;
			margin-bottom: 16rpx;
		}

		.ziti_container_top image {
			display: block;
			width: 226rpx !important;
			height: 113rpx !important;
		}

		.ziti_container_flex_bj {
			position: relative;
			margin-bottom: 16rpx;
		}

		.ziti_container_flex .ziti_container_flex_dui {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translateX(-50%) translateY(-50%);
			width: 60rpx !important;
			height: 60rpx !important;
			margin: 0 !important;
			opacity: 1 !important;
		}
	}

	.jianju_container {
		width: 750rpx;
		height: 220rpx;
		background-color: #FAFAFA;
		position: fixed;
		left: 0rpx;
		bottom: 0rpx;
		z-index: 999;
		padding-bottom: calc(env(safe-area-inset-bottom) - 14px);

		.jianju_container_top {
			width: 700rpx;
			height: 140rpx;
			position: relative;
			left: 20rpx;
			top: 20rpx;
		}

		.jianju_container_top_item {
			width: 700rpx;
			height: 25rpx;
			margin-top: 30rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;

			text {
				font-size: 28rpx;
				font-family: SimHei;
				font-weight: 400;
				color: rgb(99, 70, 70);
			}
		}

		/deep/ .tn-slider {
			width: 500rpx;
			padding: 0;
			margin: 0;
		}

		.jianju_container_top_item_txt {
			width: 50rpx;
		}

	}

	.txton_container_foot {
		width: 750rpx;
		height: 80rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		background-color: white;
		position: absolute;
		left: 0;
		box-sizing: border-box;
		padding: 0 30rpx;
		bottom: 0;
		padding-bottom: calc(env(safe-area-inset-bottom) - 14px);

		image {
			position: relative;
			z-index: 99;
			display: inline-block;
		}
	}

	/* 颜色 */
	.color_container {
		width: 750rpx;
		height: 336rpx;
		background-color: #FAFAFA;
		position: fixed;
		left: 0rpx;
		bottom: 0rpx;
		z-index: 999;
		padding-bottom: calc(env(safe-area-inset-bottom) - 14px);

		.color_container_top {
			width: 721rpx;
			height: 242rpx;
			position: absolute;
			top: 0rpx;
			left: 0rpx;
			padding-top: 14rpx;
			padding-left: 20rpx;

			.color_container_top-h {
				width: 58rpx;
				height: 58rpx;
				border-radius: 50%;
			}
		}



		.colors_item {
			border: 4rpx solid #000;
		}

		.colors_item_off {
			width: 58rpx;
			height: 58rpx;
			border-radius: 33rpx;
			border: 4rpx solid rgba(129, 129, 129, 0);
			display: inline-block;
			margin: 4rpx 12rpx 4rpx 12rpx;
		}
	}

	.duiqi_container {
		width: 750rpx;
		height: 460rpx;
		background-color: #FAFAFA;
		position: fixed;
		left: 0rpx;
		bottom: 0rpx;
		z-index: 999;
		padding-bottom: calc(env(safe-area-inset-bottom) - 14px);

		.txton_container_foot {
			width: 750rpx;
			height: 80rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			background-color: white;
			position: absolute;
			left: 0;
			bottom: 0;
			box-sizing: border-box;
			padding: 0 30rpx;
			padding-bottom: calc(env(safe-area-inset-bottom) - 14px);

			.txton_container_foot image {
				position: relative;
				z-index: 99;
				display: inline-block;
			}
		}

		.jianju_container_top {
			width: 700rpx;
			height: 140rpx;
			position: relative;
			left: 20rpx;
			top: 20rpx;

			.jianju_container_top_item {
				width: 700rpx;
				height: 25rpx;
				margin-top: 30rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;

				text {
					font-size: 28rpx;
					font-family: SimHei;
					font-weight: 400;
					color: rgb(99, 70, 70);
				}

				/deep/ .tn-slider {
					width: 500rpx;
					padding: 0;
					margin: 0;
				}
			}

			.jianju_container_top_item_txt {
				width: 50rpx;
			}
		}


		.duiqi_container_top {
			width: 750rpx;
			height: 120rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			align-items: center;

			.duiqi_container_top_item_on {
				width: 60rpx;
				height: 60rpx;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				background-color: #F0EEEE;

				image {
					width: 40rpx;
					height: 31rpx;
				}
			}

			.duiqi_container_top_item {
				width: 60rpx;
				height: 60rpx;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;

				image {
					width: 40rpx;
					height: 31rpx;
				}
			}
		}
	}

	.content-level {
		padding: 30rpx;
		width: 300rpx;

		.content-level-btn {
			color: #737373;
			display: flex;
			align-items: center;
			justify-content: space-around;
			margin-bottom: 10rpx;

			.content-level-btn-action {
				color: #fff;
			}
		}

		.content-level-li {
			display: flex;
			align-items: center;
			height: 100rpx;
			width: 100%;
			margin: 10rpx 0;
			justify-content: space-between;

			.content-level-li-icon {
				font-size: 40rpx;
				color: rgba(163, 175, 177, 0.9);
			}

			.content-level-li-border {
				border: 4rpx solid blue;
			}

			.content-level-li-img {
				width: 100rpx;
				height: 100rpx;
				background: rgba(163, 175, 177, 0.9);
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				border-radius: 14rpx;

				.content-level-li-txt {
					font-size: 24rpx;
					transform: scale(.5);
				}

				image {
					max-width: 70rpx;
					max-height: 70rpx;
				}
			}
		}
	}

	.edit_txt_view {
		.edit_txt_view_textarea {
			width: 600rpx;
			height: 500rpx;
			background: #fff;
			position: relative;
			box-sizing: border-box;
			padding: 20rpx;
		}

		.edit_txt_define {
			display: flex;
			width: 560rpx;
			line-height: 90rpx;
			height: 90rpx;
			justify-content: space-between;
			position: absolute;
			bottom: 20rpx;

			.edit_txt_define_right {
				width: 44%;
				background: #0059ff;
				font-size: 24rpx;
				font-family: SimHei;
				font-weight: 400;
				color: #fff;
				text-align: center;
				border-radius: 10rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 20rpx;
			}

			.edit_txt_define_left {
				width: 44%;
				background: rgba(240, 239, 239, 0.3);
				font-size: 24rpx;
				font-family: SimHei;
				font-weight: 400;
				color: rgba(69, 69, 69, 1);
				text-align: center;
				border-radius: 10rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 20rpx;
			}
		}

		.edit_txt_view_top {
			width: 700rpx;
			height: 100rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			position: relative;
			background: #fff;
		}

		.edit_txt_input {
			width: 100%;
			height: 30vh;
			border-radius: 5rpx;
			box-sizing: border-box;
			padding: 10rpx;
			border-radius: 10rpx;
			background: rgb(246, 247, 249);
		}
	}

	.box {
		position: relative;
		height: 100vh;
		width: 100vw;
		background: rgb(21, 20, 25);
		overflow: hidden;
	}

	.tn-color-gray-zi {
		color: #fff !important;
	}

	.tn-color-gray-txtup {
		color: #000 !important;
	}

	.sky {
		width: 700rpx;
		height: 80vh;
		position: absolute;

		.dz_content_top {
			width: 100%;
			height: 100%;
			position: relative;
			top: 50%;
			transform: translateY(-50%);
			margin-top: -36px;
		}

		.dz_content_top_content {
			position: absolute;
			overflow: hidden;
		}
	}

	.water {
		width: 100%;
		height: 30%;
		margin-top: 26%;
		border-radius: 0 0 18rpx 18rpx;
		background-color: rgb(159, 206, 255);
	}

	.fold {
		position: fixed;
		z-index: 999;
		top: 0px;
		height: 100px;
		width: 20px;
		border-radius: 0 18rpx 18rpx 0;
		background-color: rgb(153, 154, 154);
	}

	.hidenWidth {
		width: 20px;
	}

	.hidenHeight {
		height: 100px;
	}

	.showWidth {
		width: 150px;
	}

	.showHeight {
		height: 200px;
	}

	.close {
		position: fixed;
		top: 50px;
		left: 130px;
		width: 20px;
		height: 100px;
		background-color: black;
		width: 20;
		border-radius: 18rpx 0 0 18rpx;
	}

	.rope {
		position: fixed;
		top: 50px;
		width: 20px;
		height: 120px;
		left: 66px;
		overflow: hidden;
		background-color: hotpink;
		text-align: center;
	}

	.backtop {
		display: flex;
		height: 44px;
		line-height: 44px;
		margin-left: 20rpx;
		align-items: center;
		justify-content: space-between;

		.backtop-left {
			display: flex;
			align-items: center;

			image {
				width: 40rpx;
				height: 40rpx;
			}

			.backtop-img {
				margin-left: 40rpx;
			}
		}
	}

	/* 胶囊*/
	.tn-custom-nav-bar__back {
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		box-sizing: border-box;
		background-color: rgba(0, 0, 0, 0.15);
		border-radius: 1000rpx;
		border: 1rpx solid rgba(255, 255, 255, 0.5);
		color: #FFFFFF;
		font-size: 18px;

		.icon {
			display: block;
			flex: 1;
			margin: auto;
			text-align: center;
		}

		&:before {
			content: " ";
			width: 1rpx;
			height: 110%;
			position: absolute;
			top: 22.5%;
			left: 0;
			right: 0;
			margin: auto;
			transform: scale(0.5);
			transform-origin: 0 0;
			pointer-events: none;
			box-sizing: border-box;
			opacity: 0.7;
			background-color: #FFFFFF;
		}
	}


	/* 底部tabbar start*/
	.footerfixed {
		position: fixed;
		width: 100%;
		bottom: 0;
		z-index: 97;
		background-color: #000;
		box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
	}

	.textfooterfixed {
		background-color: rgba(255, 255, 255, 1);
		z-index: 98;
	}

	.tabbar-b {
		z-index: 98;
		display: flex;
		align-items: center;
		min-height: 110rpx;
		justify-content: space-between;
		padding: 0;
		height: calc(110rpx + env(safe-area-inset-bottom) / 2);
		position: fixed;
		width: 100%;
		bottom: 110rpx;
		z-index: 97;
		background-color: rgb(21, 20, 25);
		box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
		color: #fff;

		.li {
			width: 33.3%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.li-left {
			image {
				width: 40rpx;
				height: 40rpx;
			}

			.backtop-img {
				margin-left: 40rpx;
			}
		}

		.tn-icon-level {
			font-size: 44rpx;
		}

		.backtop-right {
			color: white;
			font-size: 24rpx;
			height: 60rpx;
			line-height: 60rpx;
			background: #0059ff;
			padding: 0 30rpx;
			border-radius: 10rpx;
		}
	}

	.tabbar {
		display: flex;
		align-items: center;
		min-height: 110rpx;
		justify-content: space-between;
		padding: 0;
		height: calc(110rpx + env(safe-area-inset-bottom) / 2);
	}

	.tabbar .action {
		font-size: 22rpx;
		position: relative;
		flex: 1;
		text-align: center;
		padding: 0;
		display: block;
		height: auto;
		line-height: 1;
		margin: 0;
		overflow: initial;
	}

	.tabbar .action .bar-icon {
		width: 100rpx;
		position: relative;
		display: block;
		height: auto;
		margin: 0 auto 10rpx;
		text-align: center;
		font-size: 42rpx;
	}

	.tabbar .action .bar-icon image {
		width: 50rpx;
		height: 50rpx;
		display: inline-block;
	}

	/* 毛玻璃*/
	.dd-glass {
		width: 750rpx;
		// backdrop-filter: blur(20rpx);
		// -webkit-backdrop-filter: blur(20rpx);
	}
</style>